如何使html表故意超过其容器的宽度？

Question

Demo

我试图创建一个包含水平滚动条的表格，其中任何单个行的宽度都可以设置为我想要的任何值。我已经尝试了两种不同的方法来实现这一点，它们每个都给我带来了问题：

如果我为表格指定的宽度大于其包含的div并应用overflow-x: scroll，则表格超出其容器的宽度。但是，我无法控制细胞的宽度。设置td{width:'x'px;}并不做任何事情。

如果我将table-layout:fixed应用于表格，我现在可以调整各行的宽度，但不能超过表格容器的宽度。

我如何充分利用这两个世界？我需要表格超过容器的宽度才能获得滚动条，同时还能够将不同行的宽度设置为任何值。

Answer 1

HTML表格和表格单元格按设计方式工作 - 单元格将始终限制在表格的宽度范围内。如果你想像普通的内联块元素一样调整它们的大小，你可以：

1. 使用<div class="table">和<div class="cell">来标记和设置表格。

OR

1. 更改CSS中的显示模式。表格为{display: block}，单元格为{display: inline-block}。您可能还需要摆弄其他元素的显示模式，例如<tr>，<th>，<thead>，<tbody> ......

一点注意事项：如果您使用表格作为布局页面内容的方法，请停止并强烈重新考虑更改您的方法。表格是一个讨厌的拐杖布局，应该只用于显示实际的表格数据。

Answer 2

为要超出其容器宽度的元素设置position: absolute;。但是也要将position: relative;设置为其父级，这样您就可以调整位置。