Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Scrollbar

Scrollbar For Table

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

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

.containerh1 {
  color: #2f4f6f;
}

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

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

.listtr:hover {
  background-color: #ddd;
}

.listth,
.listtd {
  padding: 10px;
  text-align: center;
}

.listtd {
  color: #333;
}

.listtrtd {
  font-size: 18px;
}

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

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

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

.listtdaimg {
  transition: all .2s ease-in-out;
}

.listtdaimg:hover {
  transform: scale(1.5);
}

.list.ID {
  width: 200px;
}

.ID {
  font-weight: bold;
}

.list.standings {
  width: 200px;
}

.standings_logoimg {
  width: 30px;
  height: 30px;
}
<!DOCTYPE html><htmllang="en"><head><title>Bootstrap Example</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1"><linkrel="stylesheet"href="https://use.fontawesome.com/releases/v5.8.1/css/all.css"integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf"crossorigin="anonymous"><linkrel="stylesheet"href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script></head><body><divclass="container"><divstyle="overflow:auto;height:80vh"><tableclass="list"style="overflow:auto;"><thead><trclass="sticky-top"><thclass="ID">ID</th><thclass="name">Name</th><thclass="standings">Image</th></tr></thead><tbody><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr><tr><tddata-label="ID"style="font-weight: bold;">ID_1</td><tddata-label="Name"><ahref="/{{contest['contest_id']}}"target="_blank">Name_1</a></td><tddata-label="Standings"><ahref="https://codeforces.com/contest/{{contest['contest_id']}}/standings"target="_blank"class="standings_logo"><imgsrc="../static/standings.png"title="cf_{{contest['contest_id']}} standings" /></a></td></tr></tbody></table></div></div></body></html>

Post a Comment for "Scrollbar For Table"