html table width100%,css - HTML table with 100% width, with vertical scroll inside tbody - Stack Ove...
I got it finally right with pure CSS by following these instructions:
The first step is to set the
to display: block so an overflow and height can be applied. From there the rows in the need to be set to position: relative and display: block so that they’ll sit on top of the now scrollable .tbody, thead { display: block; overflow-y: auto; }
Because the is relatively positioned each table cell needs an explicit width
td:nth-child(1), th:nth-child(1) { width: 100px; }
td:nth-child(2), th:nth-child(2) { width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
But unfortunately that is not enough. When a scrollbar is present browsers allocate space for it, therefore, the
ends up having less space available than the . Notice the slight misalignment this creates...The only workaround I could come up with was to set a min-width on all columns except the last one.
td:nth-child(1), th:nth-child(1) { min-width: 100px; }
td:nth-child(2), th:nth-child(2) { min-width: 100px; }
td:nth-child(3), th:nth-child(3) { width: 100px; }
Whole codepen example below:
CSS:
.fixed_headers {
width: 750px;
table-layout: fixed;
border-collapse: collapse;
}
.fixed_headers th {
text-decoration: underline;
}
.fixed_headers th,
.fixed_headers td {
padding: 5px;
text-align: left;
}
.fixed_headers td:nth-child(1),
.fixed_headers th:nth-child(1) {
min-width: 200px;
}
.fixed_headers td:nth-child(2),
.fixed_headers th:nth-child(2) {
min-width: 200px;
}
.fixed_headers td:nth-child(3),
.fixed_headers th:nth-child(3) {
width: 350px;
}
.fixed_headers thead {
background-color: #333333;
color: #fdfdfd;
}
.fixed_headers thead tr {
display: block;
position: relative;
}
.fixed_headers tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
.fixed_headers tbody tr:nth-child(even) {
background-color: #dddddd;
}
.old_ie_wrapper {
height: 300px;
width: 750px;
overflow-x: hidden;
overflow-y: auto;
}
.old_ie_wrapper tbody {
height: auto;
}
Html:
NameColorDescription
AppleRedThese are red.PearGreenThese are green.GrapePurple / GreenThese are purple and green.OrangeOrangeThese are orange.BananaYellowThese are yellow.KiwiGreenThese are green.PlumPurpleThese are PurpleWatermelonRedThese are red.TomatoRedThese are red.CherryRedThese are red.CantelopeOrangeThese are orange inside.HoneydewGreenThese are green inside.PapayaGreenThese are green.RaspberryRedThese are red.BlueberryBlueThese are blue.MangoOrangeThese are orange.Passion FruitGreenThese are green.EDIT: Alternative solution for table width 100% (above actually is for fixed width and didn't answer the question):
HTML:
NameColorDescription
AppleRedThese are red.PearGreenThese are green.GrapePurple / GreenThese are purple and green.OrangeOrangeThese are orange.BananaYellowThese are yellow.KiwiGreenThese are green.CSS:
table {
width: 100%;
text-align: left;
min-width: 610px;
}
tr {
height: 30px;
padding-top: 10px
}
tbody {
height: 150px;
overflow-y: auto;
overflow-x: hidden;
}
th,td,tr,thead,tbody { display: block; }
td,th { float: left; }
td:nth-child(1),
th:nth-child(1) {
width: 20%;
}
td:nth-child(2),
th:nth-child(2) {
width: 20%;
float: left;
}
td:nth-child(3),
th:nth-child(3) {
width: 59%;
float: left;
}
/* some colors */
thead {
background-color: #333333;
color: #fdfdfd;
}
table tbody tr:nth-child(even) {
background-color: #dddddd;
}