Ширина стола становится перепутались

Question

пожалуйста, помогите мне с этим:

весь код приведен ниже:

HTML

<div id="user_list"> 
    <table id="grd" style="width: 100%;"> 
     <thead> 
      <tr> 
      <td style="width: 15%;">Name</td> 
      <td style="width: 15%;">Age</td> 
      <td style="width: 35%;">Address</td> 
      <td style="width: 35%;">Office Address</td> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>Agnib</td> 
       <td>25</td> 
       <td>jhjhhsdj</td> 
       <td>wyeruyweryuwe</td> 
      <tr> 
     </tbody> 
    </table> 
</div> 

Все хорошо, пока здесь. Но, как только я применяю приведенный ниже css, ширина столбцов становится испорченной.

CSS

#grd thead, #grd tbody 
{ 
    display: block; 
    width: 100%; 
} 

Почему ширина становится перепутались и его становится все меньше по размеру. Я приложил образец изображения. Его происходит так же, как ниже:

Answer 1

#grd thead, #grd tbody 
 
{ 
 
    
 
    width: 100%; 
 
}

<div id="user_list"> 
 
    <table id="grd" style="width: 100%;"> 
 
     <thead> 
 
      <tr> 
 
      <td style="width: 15%;">Name</td> 
 
      <td style="width: 15%;">Age</td> 
 
      <td style="width: 35%;">Address</td> 
 
      <td style="width: 35%;">Office Address</td> 
 
      </tr> 
 
     </thead> 
 
     <tbody> 
 
      <tr> 
 
       <td>Agnib</td> 
 
       <td>25</td> 
 
       <td>jhjhhsdj</td> 
 
       <td>wyeruyweryuwe</td> 
 
      <tr> 
 
     </tbody> 
 
    </table> 
 
</div>

или

#grd thead, #grd tbody 
{ 

    width: 100%; 
} 
table 
{ 
    border:1px solid gray; 
} 
table tr td 
{ 
border:1px solid gray; 
} 

DEMO FIDDLE

DEMO UPDATED

Answer 2

В файле css просто применяйте стили для заполнения таблицы "#grd", не нужно применять отдельные элементы, такие как "#grd thead" и "#grd tbody". Попробуйте этот код один раз:

<table id="grd" style="width: 100%;" border=1> 
    <thead> 
     <tr><td></td> 
     <td style="width: 15%">Name</td> 
     <td style="width: 15%">Age</td> 
     <td style="width: 35%">Address</td> 
     <td style="width: 35%">Office Address</td> 
     </tr> 
    </thead> 
    <tbody> 
     <tr><td></td> 
      <td style="width: 15%">Agnib</td> 
      <td style="width: 15%">25</td> 
      <td style="width: 35%">jhjhhsdj</td> 
      <td style="width: 35%">wyeruyweryuwe</td> 
     <tr> 
     <tr><td></td> 
      <td style="width: 15%">Agnib</td> 
      <td style="width: 15%">25</td> 
      <td style="width: 35%">jhjhhsdj</td> 
      <td style="width: 35%">wyeruyweryuwe</td> 
     <tr> 
    </tbody> 
</table>