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

在我的应用程序中，有一个选项可以添加自动生成的表格，当表格的宽度大于包含父表格的表格的宽度时，我需要使它们能够滚动（溢出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;
}

最佳答案

我看了看你的CodePen，对我来说一切都很好。我确实看到的是您的单元并没有占用整个宽度。表格（蓝色边框）横跨整个宽度，但是您的单元格宽度适合其内容。如果您将以下内容添加到您的单元格中

td, th {
    width:100%;
}

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