Table rows do not fit the <tbody> width
In the HTML table, I have to set the property display: block;
to tbody
to make it tbody
scrollable vertically. My problem is that when I add this property, the width of the lines <tr>
no longer matches the width tbody
. Seems like width: 100%;
no longer counting for rows ...
I want to set an absolute width (like 300px) and inside this table, set the width to 100% for the rows so that the rows match the width of the table.
See an example here: https://jsfiddle.net/wiltomap/0fnLhujn/ .
Here is my code:
body {
font-family: Arial;
font-size: 0.8em;
}
table {
width: 400px;
margin: auto;
background-color: lightblue;
}
table,
th,
td {
border: 1px solid red;
border-collapse: collapse;
}
thead {
color: #fff;
background-color: #00f;
display: block;
width: 100%;
}
tbody {
height: 100px;
width: 100%;
display: block;
overflow-y: scroll;
}
tr {
width: 100%;
}
<table>
<thead>
<tr>
<th>#</th>
<th>Species</th>
<th>Date</th>
<th>Locality</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>2</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>3</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>4</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>5</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>6</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>7</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>8</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>9</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>10</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>11</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>12</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>13</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>14</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>15</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
</tbody>
</table>
source to share
Since you changed tbody
from table to block, you need to do now tr
in the table
tr{
display: table;
}
See code snippet:
body {
font-family: Arial;
font-size: 0.8em;
}
table {
width: 400px;
margin: auto;
background-color: lightblue;
}
table,
th,
td {
border: 1px solid red;
border-collapse: collapse;
}
thead {
color: #fff;
background-color: #00f;
display: block;
width: 100%;
}
tbody {
height: 100px;
width: 100%;
display: block;
overflow-y: scroll;
}
tr {
width: 100%;
display: table;
box-sizing: border-box;
}
<table>
<thead>
<tr>
<th>#</th>
<th>Species</th>
<th>Date</th>
<th>Locality</th>
</tr>
</thead>
<tbody>
<tr><td>1</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>2</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>3</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>4</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>5</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>6</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>7</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>8</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>9</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>10</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>11</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>12</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>13</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>14</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
<tr><td>15</td><td>Erithacus rubecula</td><td>2001-05-05</td><td>Manchester, UK</td></tr>
</tbody>
</table>
source to share