Skip to content

CSS-table可伸缩布局或固定列宽

[CSS]

做itext7,html转pdf功能遇到。

实测发现

  • 比较新的浏览器环境,不需要 colgroup:如果td描述了高度,即可。
  • 可以结合 colgroup 声明宽度
html
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style lang="css">  
    .column-one {  
      width: 80px;  
    }  
    .column-common {  
      width: 220px;  
    }  
    .column-sign {  
      width: 50px;  
    }  
  </style>  
  
</head>  
<body>  
<div>  
  <table class="tg">  
    <colgroup>  
      <col class="column-one"/>  
      <col class="column-common"/>  
      注意width=auto已经在html5中废弃掉。不写应该就是自动适应高度
      <col with="auto"/>  
      <col class="column-sign"/>  
    </colgroup>  
    <tbody>  
    <tr>  
      <td style='background:red;'>  
        1111  
      </td>  
      <td style='background:green;'>  
        2  
      </td>  
      <td style='background:yellow;'>  
        3  
      </td>  
      <td style='background:orange;'>  
        4  
      </td>  
    </tr>  
    </tbody>  
  </table>  
</div>  
</body>  
</html>
<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <title>Title</title>  
  <style lang="css">  
    .column-one {  
      width: 80px;  
    }  
    .column-common {  
      width: 220px;  
    }  
    .column-sign {  
      width: 50px;  
    }  
  </style>  
  
</head>  
<body>  
<div>  
  <table class="tg">  
    <colgroup>  
      <col class="column-one"/>  
      <col class="column-common"/>  
      注意width=auto已经在html5中废弃掉。不写应该就是自动适应高度
      <col with="auto"/>  
      <col class="column-sign"/>  
    </colgroup>  
    <tbody>  
    <tr>  
      <td style='background:red;'>  
        1111  
      </td>  
      <td style='background:green;'>  
        2  
      </td>  
      <td style='background:yellow;'>  
        3  
      </td>  
      <td style='background:orange;'>  
        4  
      </td>  
    </tr>  
    </tbody>  
  </table>  
</div>  
</body>  
</html>