Question

我有一个表，其中privacy-policy和check_confirmation()使用display:block。如果thead中的数据增加，则tbody也需要增加宽度，但是现在将无法那样工作。...由于<td> ...如何解决此问题？有任何建议！

我在这里尝试过CSS：

<th>

Answer 1

如果文本为非换行文本，则将单元格设置为width：1px并使用white-space：nowrap。然后，该列中的文本将确定单元格的宽度。

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
<style type="text/css">

td{width:1px;white-space:nowrap;}
table tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 90px;
    max-height: 300px;
}
</style>

<table>
  <thead>
    <tr>
      <th>Column A</th>
      <th>Column B</th>
      <th>Column C</th>
      <th>Column D</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data A.1 lorem</td>
      <td>Data B.1 ip</td>
      <td>Data C.1 sum l</td>
      <td>Data D.1</td>
    </tr>
    <tr>
      <td>Data A.2 ipsum</td>
      <td>Data B.2 lorem</td>
      <td>Data C.2 some data Data D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is long</td>
      <td>Data D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is longData D.2 a long line of text that is long</td>
    </tr>
    <tr>
      <td>Data A.3</td>
      <td>Data B.3</td>
      <td>Data C.3</td>
      <td>Data D.3</td>
    </tr>
  </tbody>
</table>
</body>
</html>

Answer 2

尝试一下：https://codepen.io/anon/pen/WKVGOw

<table>
  <thead>
  <tr>
    <th>Firstnamee</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  </thead>
   <tobody>
  <tr>
    <td>Jon</td>
    <td>Doe</td> 
    <td>50</td>
  </tr>
  <tr>
    <td>Sam</td>
    <td>Watson</td> 
    <td>34</td>
  </tr>
   </tobody>
</table>


table thead,table tbody {
    display: table-header-group;
}

table tbody {
    overflow-x: hidden;
    overflow-y: scroll;
    min-height: 90px;
    max-height: 300px;
}

td, th {
  max-width: auto;
  text-align: left
}

如何使用css根据td宽度调整th的宽度

2 个答案: