CloseTag | الشروحات | Bootstrap | الجداول في BootStrap | Bootstrap Tables

<!doctype html>
  <html lang="en">
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Bootstrap demo</title>
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    </head>
    <body>

      <div class="table-responsive">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>#</th>
              <th>Firstname</th>
              <th>Lastname</th>
              <th>Age</th>
              <th>City</th>
              <th>Country</th>
              <th>Sex</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
              <th>Example</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>Ahmed</td>
              <td>Hamdy</td>
              <td>35</td>
              <td>Cairo</td>
              <td>Egypt</td>
              <td>Male</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
              <td>Yes</td>
            </tr>
          </tbody>
        </table>
      </div>       

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>

    </body>
  </html>

PCFkb2N0eXBlIGh0bWw+DQogIDxodG1sIGxhbmc9ImVuIj4NCiAgICA8aGVhZD4NCiAgICAgIDxtZXRhIGNoYXJzZXQ9InV0Zi04Ij4NCiAgICAgIDxtZXRhIG5hbWU9InZpZXdwb3J0IiBjb250ZW50PSJ3aWR0aD1kZXZpY2Utd2lkdGgsIGluaXRpYWwtc2NhbGU9MSI+DQogICAgICA8dGl0bGU+Qm9vdHN0cmFwIGRlbW88L3RpdGxlPg0KICAgICAgPGxpbmsgaHJlZj0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9ib290c3RyYXBANS4yLjAvZGlzdC9jc3MvYm9vdHN0cmFwLm1pbi5jc3MiIHJlbD0ic3R5bGVzaGVldCIgaW50ZWdyaXR5PSJzaGEzODQtZ0gyeUlKcUtkTkhQRXEwbjRNcWEvSEdLSWhTa0lIZUw1QXloa1lWOGk1OVU1QVI2Y3NCdkFwSEhObC92STFCeCIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+DQogICAgPHN0eWxlIHR5cGU9InRleHQvY3NzIj4gOjotd2Via2l0LXNjcm9sbGJhcnt3aWR0aDo3cHg7aGVpZ2h0OjdweDt9Ojotd2Via2l0LXNjcm9sbGJhci10cmFja3tiYWNrZ3JvdW5kOiNmZmY7fTo6LXdlYmtpdC1zY3JvbGxiYXItdGh1bWJ7Ym9yZGVyLXJhZGl1czo1cHg7YmFja2dyb3VuZDojMmY0NWZmO308L3N0eWxlPjwvaGVhZD4NCiAgICA8Ym9keT4NCg0KICAgICAgPGRpdiBjbGFzcz0idGFibGUtcmVzcG9uc2l2ZSI+DQogICAgICAgIDx0YWJsZSBjbGFzcz0idGFibGUgdGFibGUtYm9yZGVyZWQiPg0KICAgICAgICAgIDx0aGVhZD4NCiAgICAgICAgICAgIDx0cj4NCiAgICAgICAgICAgICAgPHRoPiM8L3RoPg0KICAgICAgICAgICAgICA8dGg+Rmlyc3RuYW1lPC90aD4NCiAgICAgICAgICAgICAgPHRoPkxhc3RuYW1lPC90aD4NCiAgICAgICAgICAgICAgPHRoPkFnZTwvdGg+DQogICAgICAgICAgICAgIDx0aD5DaXR5PC90aD4NCiAgICAgICAgICAgICAgPHRoPkNvdW50cnk8L3RoPg0KICAgICAgICAgICAgICA8dGg+U2V4PC90aD4NCiAgICAgICAgICAgICAgPHRoPkV4YW1wbGU8L3RoPg0KICAgICAgICAgICAgICA8dGg+RXhhbXBsZTwvdGg+DQogICAgICAgICAgICAgIDx0aD5FeGFtcGxlPC90aD4NCiAgICAgICAgICAgICAgPHRoPkV4YW1wbGU8L3RoPg0KICAgICAgICAgICAgICA8dGg+RXhhbXBsZTwvdGg+DQogICAgICAgICAgICAgIDx0aD5FeGFtcGxlPC90aD4NCiAgICAgICAgICAgICAgPHRoPkV4YW1wbGU8L3RoPg0KICAgICAgICAgICAgICA8dGg+RXhhbXBsZTwvdGg+DQogICAgICAgICAgICAgIDx0aD5FeGFtcGxlPC90aD4NCiAgICAgICAgICAgICAgPHRoPkV4YW1wbGU8L3RoPg0KICAgICAgICAgICAgICA8dGg+RXhhbXBsZTwvdGg+DQogICAgICAgICAgICAgIDx0aD5FeGFtcGxlPC90aD4NCiAgICAgICAgICAgIDwvdHI+DQogICAgICAgICAgPC90aGVhZD4NCiAgICAgICAgICA8dGJvZHk+DQogICAgICAgICAgICA8dHI+DQogICAgICAgICAgICAgIDx0ZD4xPC90ZD4NCiAgICAgICAgICAgICAgPHRkPkFobWVkPC90ZD4NCiAgICAgICAgICAgICAgPHRkPkhhbWR5PC90ZD4NCiAgICAgICAgICAgICAgPHRkPjM1PC90ZD4NCiAgICAgICAgICAgICAgPHRkPkNhaXJvPC90ZD4NCiAgICAgICAgICAgICAgPHRkPkVneXB0PC90ZD4NCiAgICAgICAgICAgICAgPHRkPk1hbGU8L3RkPg0KICAgICAgICAgICAgICA8dGQ+WWVzPC90ZD4NCiAgICAgICAgICAgICAgPHRkPlllczwvdGQ+DQogICAgICAgICAgICAgIDx0ZD5ZZXM8L3RkPg0KICAgICAgICAgICAgICA8dGQ+WWVzPC90ZD4NCiAgICAgICAgICAgICAgPHRkPlllczwvdGQ+DQogICAgICAgICAgICAgIDx0ZD5ZZXM8L3RkPg0KICAgICAgICAgICAgICA8dGQ+WWVzPC90ZD4NCiAgICAgICAgICAgICAgPHRkPlllczwvdGQ+DQogICAgICAgICAgICAgIDx0ZD5ZZXM8L3RkPg0KICAgICAgICAgICAgICA8dGQ+WWVzPC90ZD4NCiAgICAgICAgICAgICAgPHRkPlllczwvdGQ+DQogICAgICAgICAgICAgIDx0ZD5ZZXM8L3RkPg0KICAgICAgICAgICAgPC90cj4NCiAgICAgICAgICA8L3Rib2R5Pg0KICAgICAgICA8L3RhYmxlPg0KICAgICAgPC9kaXY+ICAgICAgIA0KDQogICAgPHNjcmlwdCBzcmM9Imh0dHBzOi8vY2RuLmpzZGVsaXZyLm5ldC9ucG0vYm9vdHN0cmFwQDUuMi4wL2Rpc3QvanMvYm9vdHN0cmFwLmJ1bmRsZS5taW4uanMiIGludGVncml0eT0ic2hhMzg0LUEzckpEODU2S293U2I3ZHdsWmRZRWtPMzlHYWdpN3ZJc0YwanJSQW9RbURLS3RRQkhVdUxaOUFzU3Y0akQ0WGEiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KICAgICAgICA8c2NyaXB0IHNyYz0iaHR0cHM6Ly9jZG4uanNkZWxpdnIubmV0L25wbS9AcG9wcGVyanMvY29yZUAyLjExLjUvZGlzdC91bWQvcG9wcGVyLm1pbi5qcyIgaW50ZWdyaXR5PSJzaGEzODQtWGUrOGNMOW9KYTZ0Ti92ZUNoU1A3cSttblNQYWo1QmN1OW1QWDVGNXhJR0UwRFZpdHRhcVQ1bG9yZjBFSTdWayIgY3Jvc3NvcmlnaW49ImFub255bW91cyI+PC9zY3JpcHQ+DQogICAgICAgIDxzY3JpcHQgc3JjPSJodHRwczovL2Nkbi5qc2RlbGl2ci5uZXQvbnBtL2Jvb3RzdHJhcEA1LjIuMC9kaXN0L2pzL2Jvb3RzdHJhcC5taW4uanMiIGludGVncml0eT0ic2hhMzg0LU9EbURJVnpOK3BGZGV4eEhFSEZCUUgzLzkvdlE5dW9yaTQ1ejRKam5Gc1J5ZGJtUWJtTDV0MXRRMGN1bFV6eUsiIGNyb3Nzb3JpZ2luPSJhbm9ueW1vdXMiPjwvc2NyaXB0Pg0KDQogICAgPC9ib2R5Pg0KICA8L2h0bWw+