tr tbody 以 100% 宽度滚动答案

【问题标题】：tr tbody scroll with 100% widthtr tbody 以 100% 宽度滚动
【发布时间】：2020-06-27 08:53:55
【问题描述】：

我在寻找另一个问题，但找不到它

table>tbody {
  display: block;
  max-height: 50px;
  overflow: auto;
}

table {
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
  </tbody>
</table>

将滚动添加到 tbody，

我想通过删除 td 和 scroll 之间的空间来使宽度为 100%。

可以不固定td的宽度吗？

【问题讨论】：

请查看此链接，stackoverflow.com/questions/1457563/…。您可以使用表格布局：固定；和单元格的宽度相等。
谢谢，但我无法固定 th 或 tr 的宽度。

标签： html css

【解决方案1】：

如果我没有正确回答您的问题，您可以通过以下样式获得全宽：

table { 
width: 100%; 
border-spacing: 0; 
}

table tbody, table thead { 
 display: block; 
}  

thead tr th { 
height: 40px;  
line-height: 40px; 
} 

table tbody { 
height: 50px;  
overflow-y: auto; 
overflow-x: hidden;  
} 

tbody td, thead th { 
width : 200px; 
} 
td { 
text-align:center; 
}

【讨论】：

我无法固定宽度因为宽度会改变

【解决方案2】：

试试这个，首先，删除这整个部分

 table>tbody {
      display: block;
      max-height: 50px;
      overflow: auto;
    }

其次，用div 标记包围表格标记 例如： <div><table>......</table></div>。让div标签像这样滚动，

div {
  max-height: 50px;
  overflow: auto;
}

【讨论】：

对不起，我只想使用 tbody，而不是 div。

【解决方案3】：

在css 下方应用到 tr 将帮助您解决width 问题，而无需为td 提供特定宽度。

table>tbody {
  display: block;
  max-height: 50px;
  overflow: auto;
}

table {
  width: auto;
  display: inherit;
}

tr {
  display: inline-table;
  width: 100%;
}

<table>
  <tbody>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
    <tr>
      <td>content1</td>
      <td>content2</td>
      <td>content3</td>
      <td>content4</td>
    </tr>
  </tbody>
</table>

【讨论】：

谢谢，我现在测试一下
jsfiddle 跑了，但在我的网络上它被推到了右边。