Question

我想知道如何将两张桌子排列在一起并占据相同的宽度。

以下是html示例：

<div class="wd100 gridcntnr">
<table class="wd100 bgred">
    <tbody>
        <tr>
            <td>LOREM IPSUM</td>
            <td>NAME</td>
            <td>ABC</td>
        </tr>
    </tbody>
</table>
<table class="wd100">
    <thead>
        <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
        <th>Header 8</th>
        <th>Header 9</th>
        <th>Header 10</th>
        </tr>

    </thead>
    <tbody>
    </tbody>
</table>
  </div>

相应的css是：

.gridcntnr{
overflow:auto;
border: 1px solid black;
}
.wd100{
    width: 100%;
}
.bgred{
    background-color:red;
}

我想知道为什么两个表的排列有所不同（右侧顶部表格中出现额外的空间），以及如何将两个表格排列在一起并占据相同的宽度

我尝试使用table-layout：fixed;但这样做会使第二张桌子变得混乱，并且右侧顶部表格中出现的额外空间不会被完全删除。

任何帮助将不胜感激。请贡献。

Answer 1

您是否按照以下文件尝试过绝对定位？ - ＆GT; http://www.htmldog.com/guides/css/intermediate/layout/

Answer 2

您可以通过多种方式将一张桌子放在另一张桌子的顶部。例如，您可以将负边距应用于第二个表，如下所示：

.gridcntnr>table:last-child {
    margin-top: -25px;
}

关于第一个表右侧的额外空间，表将占用内容所需的空间。第二个表中的行数比第一个表中的行多得多。第一个表采用您定义的100％宽度，但该宽度相对于其父元素div。第二个表溢出其父级的整个宽度，需要您滚动。解决这个问题的唯一方法是使用一个监视器，它可以适应页面上第二个表的所有内容而无需滚动。那么第一张桌子的右边就没有多余的空间了。

但是你为什么用这种方式使用表格呢？你可能会发现使用语义标记更容易。如果显示数据，请分解表格以更轻松地以更少的压力显示内容。

Answer 3

您需要让父容器的位置为：relative;和有位置的孩子：绝对的;像这样：

.gridcntnr {
     position:relative;
     overflow:auto;
     border: 1px solid black;
}
.gridcntnr .wd100 {
     position:absolute;
     width: 100%;
}
.gridcntnr .bgred {
     position:absolute;
     background-color:red;
}

Answer 4

您可以通过将周围div的display css属性设置为table或inline-table

来获得请求的结果

.gridcntnr{
    display:inline-table;
    overflow:auto;
    border: 1px solid black;
}

如何将两张桌子排列在一起，占据相同的宽度

4 个答案: