Question

在我的应用程序中，有一个选项可以添加自动生成的表，当表格比包含父表格宽时，我需要使它们可滚动（overflow-x）。我的解决方案适用于更宽的表，但不适用于更窄的表，而不是父表，我需要它们在父容器中伸展。 CodePen here

HTML：

<div id="parent">
    <table cellspacing="0" width="100%" class="scroll">
        <tbody>
            <tr class="ms-rteTableHeaderRow-default">
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
                <th rowspan="1" colspan="3">dasdasdas</th>
            </tr>
            <tr class="ms-rteTableOddRow-default">
                <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">dasdasdas<br>dasdasdas<br>dasdasdas</th>
                <td class="ms-rteTableOddCol-default">dasdasdas dasdasdas&nbsp;</td>
                <td class="ms-rteTableEvenCol-default">dasdasdas</td>
                <td class="ms-rteTableOddCol-default">&nbsp;</td>

            </tr>
            <tr class="ms-rteTableEvenRow-default">
                <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="4">dasdasdas</th>
                <td class="ms-rteTableOddCol-default">dasdasdas</td>
                <td class="ms-rteTableEvenCol-default">dasdasdas</td>

                <td class="ms-rteTableEvenCol-default">dasdasdas</td>
            </tr>
            <tr class="ms-rteTableOddRow-default">
                <th class="ms-rteTableFirstCol-default" rowspan="1" colspan="1">dasdasdas</th>
                <td class="ms-rteTableOddCol-default">dasdasdas<br>dasdasdas</td>
                <td class="ms-rteTableEvenCol-default">dasdasdas<br>dasdasdas</td>

            </tr>
            <tr class="ms-rteTableFooterRow-default">
                <th class="ms-rteTableFooterFirstCol-default" rowspan="1" colspan="4">dasdasdas</th>
                <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
                <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
                <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
                <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
                <td class="ms-rteTableFooterOddCol-default" rowspan="1">dasdasdas</td>
                <td class="ms-rteTableFooterEvenCol-default" rowspan="1">dasdasdas</td>
            </tr>
        </tbody>
    </table>


<table cellspacing="0" width="100%" class="ms-rteTable-default scroll" style="font-size:1em">

    <tbody>
        <tr>
            <th rowspan="1" colspan="1">title 1</th>
            <th  rowspan="1" colspan="1">this table should span across the parent</th>
        </tr>
        <tr>
            <th rowspan="1" colspan="1">content</th>
            <td >contentcontentcontentcontentcontentcontentcontentcontentcontentcontent</td>
        </tr>
    </tbody>
</table>
</div>

CSS：

td,th{
  border:1px solid black;
}
#parent{
  width: 700px;
}
table{
  border:1px solid blue;
   padding: 10px;

}
.scroll{
  display: block;
    overflow-x: auto;
}

tr {
    display: table-row;
    vertical-align: inherit;
    border-color: inherit;
}
tbody {
    display: table-row-group;
    vertical-align: middle;
    border-color: inherit;
}

Answer 1

我看了你的CodePen，一切看起来都很好。我所看到的情况是你的细胞不占据整个宽度。表格（蓝色边框）横跨整个宽度，但您的单元格宽度符合其内容。如果您将以下内容添加到单元格

td, th {
    width:100%;
}

您的表格单元格将跨越表格的整个宽度。话虽这么说，也许你只想要第二个单元格跨越全宽。然后只需添加 width: 100%; 的自定义类。

HTML宽表应滚动，窄表应拉伸以填充父

1 个答案: