テーブルの行が一致しない<tbody>の幅

Question

HTMLテーブルでtbodyを垂直方向にスクロールできるようにするには、display: block;のプロパティを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; } 

テーブルに作成する必要がスニペット：

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>