2

我想让下表调整其宽度以适应单元格，而不是其容器：

<div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

容器的宽度小于单元格宽度的总和。可以在这里显示水平滚动条，但表格不能比它的容器宽。如果我计算 colspan 和表格的总和宽度，它可以完成这项工作，但如果单元格具有非 px 宽度，如“%”或“em”怎么办？那么静态px计算就不行了。

当前效果是： 在此处输入图像描述 预期效果是表格的宽度超过了容器 div 的宽度。

但是直接给表格设置宽度也有问题：为单元格设置的宽度会被忽略。例如：

    <div style='width: 700px; border: 1px solid red;'>
    <table border="1" style='table-layout: fixed; width: 900px;'><tbody>
        <tr>
            <th style="" colspan="3">Group 1</th>
            <th style="" colspan="5">Group 2</th>
            <th style="" colspan="4">Group 3</th>
        </tr>
        <tr>
            <th style="width: 62px;">A</th>
            <th style="width: 200px;">B</th>
            <th style="width: 62px;">C</th>
            <th style="width: 62px;">D</th>
            <th style="width: 62px;">E</th>
            <th style="width: 62px;">F</th>
            <th style="width: 62px;">G</th>
            <th style="width: 62px;">H</th>
            <th style="width: 62px;">I</th>
            <th style="width: 100px;">J</th>
            <th style="width: 62px;">K</th>
            <th style="width: 68px;">L</th>
        </tr>
    </tbody></table>
</div>

效果是： 在此处输入图像描述 注意第 2 个单元格（应该是 200px）与第 1 个和第 3 个单元格一样窄。

任何人都可以对这个问题有所了解吗？提前致谢。

4

3 回答 3

3

添加CSS：

th{
    min-width:50px; /*for instance*/
}
div{
    overflow-x:scroll;
}

并style='table-layout: fixed; width: 1px;'从表中删除

于 2013-03-06T02:56:50.993 回答
0

Merijn's answer适用于固定宽度单元格的情况，稍作调整：

与其指定全局最小宽度，不如为每个单元格指定它，如下所示：

<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>

至少这样，您的个人宽度不会被忽略，给您一个比容器更宽的表格，并且单元格宽度不规则。

于 2013-03-06T03:18:44.660 回答
0

放置桌子绝对可以接受吗？

<table border="1" style="position:absolute;">

这使得 div 不再水平包含表格。但是，当然，div 也不再包含垂直的表格。不过，您可以通过手动指定 div 高度来解决此问题。

于 2013-03-06T02:51:37.133 回答