File "aaa.html"

Full Path: /home/analogde/www/Dev tableau/aaa.html
File size: 2.6 KB
MIME-type: text/html
Charset: utf-8

 
Open Edit   Advanced Editor   Back 

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tableau avec Défilement</title>
  <!-- Lien vers Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEJ6hu7N9R3K5wCoPY5i2hPnZjVqX7f2FMY6rnxjtb+HAjsaayjGVoF2A+Ug5" crossorigin="anonymous">
  <style>

 

body {
  background: #94b5c0;
}
.table {
  background: #ee99a0;
  border-radius: 0.2rem;
  width: 100%;
  padding-bottom: 1rem;
  color: #212529;
  margin-bottom: 0;
}
.table th:first-child,
.table td:first-child {
  position: sticky;
  left: 0;
  background-color: #ad6c80;
  color: #373737;
}

.table td {
  white-space: nowrap;
}

 </style> 

</head>
<body>

<div class="container">
  <div class="row mt-3">
    <div class="col-3"></div>
    <div class="col-6">
      <div class="table-responsive">
        <table class="table table-hover">
          <thead>
            <tr>
              <th scope="col">GUID</th>
              <th scope="col">Username</th>
              <th scope="col">Score</th>
              <th scope="col">Rating</th>
              <th scope="col">Attempts</th>
              <th scope="col">Last login</th>
              <th scope="col">Joined</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1012</th>
              <td>hamsterclover</td>
              <td>4,230</td>
              <td>9</td>
              <td>3</td>
              <td>2020-01-24 19:52:28</td>
              <td>2018-05-21 22:10:21</td>
            </tr>
            <tr>
              <th>1013</th>
              <td>cellofruit</td>
              <td>4,126</td>
              <td>7</td>
              <td>3</td>
              <td>2020-01-21 11:05:16</td>
              <td>2019-02-05 17:41:19</td>
            </tr>
            <tr>
              <th>1014</th>
              <td>enchantingsun</td>
              <td>4,085</td>
              <td>5</td>
              <td>4</td>
              <td>2020-01-22 18:44:33</td>
              <td>2019-03-28 12:16:02</td>
            </tr>
            <tr>
              <th>1015</th>
              <td>antdory</td>
              <td>4,139</td>
              <td>7</td>
              <td>5</td>
              <td>2020-01-25 18:12:58</td>
              <td>2019-06-07 11:44:37</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
    <div class="col-3"></div>
  </div>
</div>

</body>
</html>