表行不符合宽度

Question

在HTML表格中，我必须将display: block;属性设置为tbody才能使tbody垂直滚动。我的问题是，当我添加此属性时，行<tr>的宽度不再适合tbody宽度。似乎width: 100%;不再考虑行...

我想设置一个''绝对宽度（例如300px），在此表中，为行设置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>

Answer 1

由于您已从表格更改为tbody，因此您需要立即制作tr到表格

tr{
    display: table;
}

请参阅代码段：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;