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

＆＃13;

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

＆＃13;

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

＆＃13;

或

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

表格宽度变得混乱

2 个答案: