<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
        <th class="text-right" scope="col">فعالیت</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
        <td class="text-right">
          <div class="dropdown">
            <a href="#" class="btn btn-sm"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">فعالیت</button>
              <button class="dropdown-item" type="button">فعالیت دیگر</button>
              <button class="dropdown-item" type="button">یک فعالیت دیگر<</button>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
        <td class="text-right">
          <div class="dropdown">
            <a href="#" class="btn btn-sm"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">فعالیت</button>
              <button class="dropdown-item" type="button">فعالیت دیگر</button>
              <button class="dropdown-item" type="button">یک فعالیت دیگر<</button>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
        <td class="text-right">
          <div class="dropdown">
            <a href="#" class="btn btn-sm"
               data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              <button class="dropdown-item" type="button">فعالیت</button>
              <button class="dropdown-item" type="button">فعالیت دیگر</button>
              <button class="dropdown-item" type="button">یک فعالیت دیگر<</button>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Avatar</th>
            <th scope="col">نام</th>
            <th scope="col">نام خانوادگی</th>
            <th scope="col">شناسه</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <th>
                <figure class="avatar avatar-sm">
                    <img src="../../assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
                </figure>
            </th>
            <td>سیما</td>
            <td>احمدی</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <th>
                <figure class="avatar avatar-sm">
                    <a href="#">
                        <span class="avatar-title bg-info rounded-circle">J</span>
                    </a>
                </figure>
            </th>
            <td>محمد</td>
            <td>محمدی</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <th>
                <figure class="avatar avatar-sm">
                    <img src="../../assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">
                </figure>
            </th>
            <td>لیلا</td>
            <td>پرنده</td>
            <td>@twitter</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <th>
                <figure class="avatar avatar-sm">
                    <a href="#">
                        <span class="avatar-title bg-warning rounded-circle">M</span>
                    </a>
                </figure>
            </th>
            <td>علی</td>
            <td>محمدی</td>
            <td>@fat</td>
        </tr>
        </tbody>
    </table>
</div>

<div class="table-responsive">
    <table class="table">
        <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Avatar</th>
            <th scope="col">نام</th>
            <th scope="col">نام خانوادگی</th>
            <th scope="col">Status</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">1</th>
            <th>
                <figure class="avatar avatar-sm">
                    <img src="../../assets/media/image/user/women_avatar5.jpg" class="rounded-circle" alt="image">
                </figure>
            </th>
            <td>سیما</td>
            <td>احمدی</td>
            <td>
                <span class="badge badge-success">فعال</span>
            </td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <th>
                <figure class="avatar avatar-sm">
                    <a href="#">
                        <span class="avatar-title bg-primary rounded-circle">M</span>
                    </a>
                </figure>
            </th>
            <td>Morn</td>
            <td>محمدی</td>
            <td>
                <span class="badge badge-danger">غیرفعال</span>
            </td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <th>
                <figure class="avatar avatar-sm">
                    <img src="../../assets/media/image/user/man_avatar5.jpg" class="rounded-circle" alt="image">
                </figure>
            </th>
            <td>لیلا</td>
            <td>پرنده</td>
            <td>
                <span class="badge badge-warning">در انتظار</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="table-responsive">
  <table class="table table-striped">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-bordered">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-borderless">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-hover">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-small">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>صنم</td>
        <td>امیری</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table">
    <thead class="thead-light">
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Class</th>
        <th scope="col">سرتیتیر</th>
        <th scope="col">سرتیتیر</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-active">
        <th scope="row">فعال</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr>
        <th scope="row">پیشفرض</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-primary">
        <th scope="row">پیشفرض</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-secondary">
        <th scope="row">فرعی</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-success">
        <th scope="row">موفقیت</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-danger">
        <th scope="row">خطر</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-warning">
        <th scope="row">هشدار</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-info">
        <th scope="row">اطلاعات</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-light">
        <th scope="row">روشن</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="table-dark">
        <th scope="row">تیره</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table table-dark">
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">سرتیتیر</th>
        <th scope="col">سرتیتیر</th>
      </tr>
    </thead>
    <tbody>
      <tr class="bg-primary">
        <th scope="row">1</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="bg-success">
        <th scope="row">3</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr>
        <th scope="row">4</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="bg-info">
        <th scope="row">5</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr>
        <th scope="row">6</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="bg-warning">
        <th scope="row">7</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr>
        <th scope="row">8</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
      <tr class="bg-danger">
        <th scope="row">9</th>
        <td>خانه</td>
        <td>خانه</td>
      </tr>
    </tbody>
  </table>
</div>

<div class="table-responsive">
  <table class="table">
    <caption>لیست کاربران</caption>
    <thead>
      <tr>
        <th scope="col">#</th>
        <th scope="col">نام</th>
        <th scope="col">نام خانوادگی</th>
        <th scope="col">شناسه</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">1</th>
        <td>علی</td>
        <td>احمدی</td>
        <td>@mdo</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>محمد</td>
        <td>محمدی</td>
        <td>@fat</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>لیلا</td>
        <td>پرنده</td>
        <td>@twitter</td>
      </tr>
    </tbody>
  </table>
</div>