问题:

I have a table and when I set the table to a width of 100% and the table rows to a width pf 100% nothing happens or changes to the width.

.Table-Normal {     position: relative;     display: block;     margin: 10px auto;     padding: 0;     width: 100%;     height: auto;     border-collapse: collapse;     text-align: center; }  .Table-Normal thead tr {     background-color: #E74C3C;     font-weight: bold; }  .Table-Normal tr {     margin: 0;     padding: 0;     border: 0;     border: 1px solid #999;     width: 100%; }  .Table-Normal tr td {     margin: 0;     padding: 4px 8px;     border: 0;     border: 1px solid #999; }  .Table-Normal tbody tr:nth-child(2) {     background-color: #EEE; }

<table id="top-leader" class="Table-Normal">     <thead>         <tr>             <td>Position</td>             <td>Name</td>             <td>Kills</td>             <td>Deaths</td>         </tr>     </thead>     <tbody>         <tr>             <td>1</td>             <td>John Doe</td>             <td>16 Kills</td>             <td>0 Deaths</td>         </tr>          <tr>             <td>2</td>             <td>John Smith</td>             <td>13 Kils</td>             <td>1 Death</td>         </tr>          <tr>             <td>3</td>             <td>Bob Smith</td>             <td>11 Kills</td>             <td>0 Deaths</td>         </tr>     </tbody> </table>

回答1:

Remove display: block in .Table-Normal

Fiddle

.Table-Normal {     position: relative;     //display: block;     margin: 10px auto;     padding: 0;     width: 100%;     height: auto;     border-collapse: collapse;     text-align: center; }

回答2:

By specifying display: block you've overriding the default value from the browser stylesheet for the table element: display: table. Removing display: block or replacing it with display: table fixes this.

转载请标明出处:Table row not expanding to full width

文章来源: Table row not expanding to full width

标签

table

display