表格显示问题

表格显示问题:

原因：

 当为表格设置宽度100%时，将其他标签也设置了100%，则会默认th宽度100%，因此第一列很宽

 

HTML代码

<body>
<div id="div_container">
  <div id="div_fruit_list">
  <table id="tbl_fruit">
    <tr>
      <th>名称</th>
      <th>单价</th>
      <th>数量</th>
      <th>小计</th>
      <th>操作</th>
    </tr>
    <tr>
      <td>苹果</td>
      <td>5</td>
      <td>20</td>
      <td>100</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>西瓜</td>
      <td>3</td>
      <td>20</td>
      <td>100</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>菠萝</td>
      <td>5</td>
      <td>20</td>
      <td>100</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>梨子</td>
      <td>5</td>
      <td>20</td>
      <td>100</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>总计</td>
      <td colspan="4">999</td>
    </tr>
  </table>
</div>
</div>
</body>

 

CSS代码

body{
    margin:0;
    padding:0;
    background-color:#808080;
}
div{
    position:relative;
    float:left;
}

#div_container{
    width:80%;
    height:100%;
    border:1px solid blue;
    margin-left:10%;
    float:left;
}
#tbl_fruit,#tbl_fruit tr,#tbl_fruit th,#tbl_fruit td{
    border: 1px solid olivedrab;
    width:100%;

}

 

posted @ 2022-01-21 16:32  YL2022  阅读(83)  评论(0)    收藏  举报