html 表格，具有水平滚动和固定单元格宽度

Question

任何人都可以帮助我使用具有水平滚动和固定单元格宽度的 html 表吗？

我可以制作一个水平滚动的表格，见下文，但我无法调整此表格中的单元格宽度。 有什么建议吗？ 谢谢。

顺便说一句，如果有帮助，我正在使用引导程序 4。

 table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; } th, td { text-align: left; padding: 8px; }

 <div style="overflow-x:auto;"> <table> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> </table> </div>

Answer 1

使用table-layout:fixed; 为您的餐桌。

 .MainDiv { overflow: auto; border: 1px solid red; } table { border-collapse: collapse; border-spacing: 0; width: 100%; table-layout: fixed; }.MainDiv table td { text-align: left; padding: 8px; width: 200px; border: 1px solid blue; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" /> <div class="MainDiv"> <table> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> </table> </div>

Answer 2

您可以将表格的属性宽度值更改为“最大内容”，如下所示：

 <style> table { border-collapse: collapse; border-spacing: 0; width: max-content; border: 1px solid #ddd; } th, td { text-align: left; padding: 8px; width: 100px; } </style> <div style="overflow-x:auto;"> <table> <tr> <td >Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> </table> </div>

Internet Explorer 不支持“最大内容”值： https://developer.mozilla.org/fr/docs/Web/CSS/width

另一个适用于所有 web 浏览器的解决方案是将属性“table-layout：fixed”添加到表格样式并指定您想要的单元格宽度，如下所示：

 <style> table { border-collapse: collapse; border-spacing: 0; width: 100%; border: 1px solid #ddd; table-layout: fixed; } th, td { text-align: left; padding: 8px; width: 100px; } </style> <div style="overflow-x:auto;"> <table> <tr> <td >Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> <tr> <td>Test</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> <td>124567890</td> </tr> </table> </div>

有关“表格布局”和支持的浏览器的更多信息，请参阅此链接