在HTML表格中,我需要将
我想设置一个绝对宽度(例如300像素),并在表格中将行的宽度设置为100%,以使行适合表格的宽度。
请参见此处的示例:https://jsfiddle.net/wiltomap/0fnLhujn/。
以下是我的代码:
display: block;
属性设置为tbody
,以使tbody
在垂直方向上可以滚动。我的问题是,当我添加这个属性时,行<tr>
的宽度不再适合tbody
的宽度。似乎对于行来说,width: 100%;
不再被考虑在内...我想设置一个绝对宽度(例如300像素),并在表格中将行的宽度设置为100%,以使行适合表格的宽度。
请参见此处的示例:https://jsfiddle.net/wiltomap/0fnLhujn/。
以下是我的代码:
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>