如何将列中的表行拆分为固定宽度

Question

如何在列中打破表格行以使表格适合固定宽度，就像附加图像中所示？

我尝试过工作休息和边界崩溃，但不会给出我想要的结果。

table {
word-break: break-all;
font-size: 12px;
border-collapse: collapse;
}

Answer 1

正确构建表格：）

实施例

Have a fiddle!

HTML

<table>
    <tbody>
        <tr>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
            <th>Average</th>
        </tr>
        <tr>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
            <td rowspan="4">$100</td>
        </tr>
        <tr>
            <th>Friday</th>
            <th>Saturday</th>
            <th>Sunday</th>
        </tr>
        <tr>
            <td>$100</td>
            <td>$100</td>
            <td>$100</td>
        </tr>
    </tbody>
</table>

CSS

table {
    border-collapse: collapse;
    border: solid 1px #CCC;
}
th, td {
    border: solid 1px #CCC;
}