表格行不适应<tbody>宽度

Question

在HTML表格中，我需要将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>

- wiltomap

Answer 1

自从您将表格中的tbody更改为块级元素，现在需要将tr更改为表格元素。

tr{
    display: table;
}

请查看代码片段：

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>

- Chiller

---

我注意到表格的表头与内容不对齐了，你能修复一下吗？ - CalvT

@CalvT븃，你需要使用JavaScript将tbody单元格与thead单元格对齐... 例如：http://jsfiddle.net/hashem/CrSpu/555/ - Chiller

@Chiller 我已经看了那个代码片段一会儿了 :D - CalvT

@CalvT븃 我也不得不搜索它 XD - Chiller