HTML 宽表应该滚动，窄表应该拉伸(stretch)以填充父级

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%; 。