Scrollbar For Table

February 28, 2023 Post a Comment

I have a system : https://jsfiddle.net/p2fs68gm/2 I want to add scrollbar for the table. But, as soon as thead or tbody is made display: block, their width gets reduced. I have tri

Solution 1:

wrap your table inside div and it shoud be set overflow:auto;height:80vh

 table thead tr th {
  background-color: white;
  position: sticky;
  z-index: 100;
  top: -1px;
}
.container {
  margin: 50px;
}

.container h1 {
  color: #2f4f6f;
}

.list {
  border: 1px solid #6c7ae0;
  width: 100%;
  margin-top: 20px;
  padding: 0;
  border-collapse: separate;
  border-spacing: 0;
  box-shadow: 0 0 70px #bbb, 0 0 30px #6c7ae0;
}

.list tr {
  border: 1px solid #ddd;
  padding: 5px;
}

.list tr:hover {
  background-color: #ddd;
}

.list th,
.list td {
  padding: 10px;
  text-align: center;
}

.list td {
  color: #333;
}

.list tr td {
  font-size: 18px;
}

.list th {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 18px;
  letter-spacing: 1px;
  background-color: #6c7ae0;
  color: white;
}

.list td a {
  color: #0000cd;
  text-decoration: none;
  font-weight: 600;
}

.list td a:hover {
  color: #191970;
  font-size: 20px;
  font-weight: bold;
}

.list td a img {
  transition: all .2s ease-in-out;
}

.list td a img:hover {
  transform: scale(1.5);
}

.list .ID {
  width: 200px;
}

.ID {
  font-weight: bold;
}

.list .standings {
  width: 200px;
}

.standings_logo img {
  width: 30px;
  height: 30px;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
  <div class="container">
    <div style="overflow:auto;height:80vh">
      <table class="list" style="overflow:auto;">
        <thead>
          <tr class="sticky-top">
            <th class="ID">ID</th>
            <th class="name">Name</th>
            <th class="standings">Image</th>
          </tr>
        </thead>
        <tbody>

          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
          <tr>
            <td data-label="ID" style="font-weight: bold;">ID_1</td>
            <td data-label="Name"><a href="/{{contest['contest_id']}}" target="_blank">Name_1</a></td>
            <td data-label="Standings">
              <a href="https://codeforces.com/contest/{{contest['contest_id']}}/standings" target="_blank" class="standings_logo"><img src="../static/standings.png" title="cf_{{contest['contest_id']}} standings" /></a>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</body>

</html>

Html5 Info

Scrollbar For Table

Solution 1:

Post a Comment for "Scrollbar For Table"