Question

我设法让可滚动表工作（表作为一个整体），但现在我想使它固定大小并仅在表行内滚动。

假设我有一张宽度为100的普通表。

<table width="100">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

如果<td>内的值真的很长

，这将正常工作

<td>LongLongLongLongLongLongLongLong</td>

表格宽度将增加以适应那个长<td>

我想要完成的是使<tr>可滚动。因此，如果<td>中的<tr>非常长，<tr>应该可滚动，而不是增加整个表格宽度。

我通过使td可滚动得到了一些部分解决方案。但我希望tr可滚动而不是td

<table width="100">
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>

  <td width="50">
   <div style="width: 50px; overflow: auto">   
   JanuaryJanuaryJanuaryJanuaryJanuary
     </div>
</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$80</td>
  </tr>
</table>

Answer 1

在<html>块上创建滚动元素非常简单。尝试将以下内容添加到<tr>

（CSS）

tr {
   overflow: scroll;
}

在您可以添加的<td>元素中创建更好的视图：

（CSS）

td {
word-break: break-word;
}

希望这有帮助！

固定表格宽度和可滚动表格行

1 个答案: