Question

我有这样的代码：

＆＃13;

table {
  table-layout: fixed;
  border-collapse: collapse;
}
th, td {
  width: 120px;
  border: 1px solid black;
}
div {
  overflow: scroll;
  width: 300px;
}

＆＃13;

<div>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
  </tr>
  <tr>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
</table>
</div>

＆＃13;

为什么细胞不具有120px的宽度？我希望表格的宽度大于div的宽度，所以我可以滚动div。

Answer 1

用此更改您的代码。

<!DOCTYPE html>
<html>
<head>
<style>
table {
  table-layout: fixed;
  border-collapse: collapse;
}
table, th, td {
  width: 120px;
  border: 1px solid black;
}
div {
  overflow: scroll;
}
</style>
</head>
<body>
<div>
<table>
  <tr>
    <th>A</th>
    <th>B</th>
    <th>C</th>
    <th>D</th>
    <th>E</th>
  </tr>
  <tr>
    <td>F</td>
    <td>G</td>
    <td>H</td>
    <td>I</td>
    <td>J</td>
  </tr>
</table>
</div>


</body>
</html>

具有固定表格布局的表格单元格上的宽度不起作用

1 个答案: