Question

我想创建一个垄断游戏板，但是当第二个td持续width: 70%时，仅在元素包含class="middle"时使用。{1}}。但是我的第一行并没有包含.middle类，但它占了70％。

包含＆＃34;史密斯＆＃34;应该有width: 7.5%。

Answer 1

这里的问题是由于每行的列数不均匀。您必须将<td>元素视为列。如果您在一个<td>上设置70％宽度，则将列的宽度设置为70％。

您所寻找的不是宽度，但更有可能是colspan，这允许<td>跨越多列。

这样的事情可以让你更接近你想要的外表：

td {
    border: 1px solid black;
}

td.top-bottom {
    height: 15%;
    width: 7.5%;
}

td.side {
    width: 15%;
}

td.middle {
    width: 70%;
}

<table style="width:100%" cellspacing="0" cellpadding="0">
    <tr>
        <td class="top-bottom">Jill</td>
        <td class="top-bottom">Smith</td>
        <td class="top-bottom">50</td>
        <td class="top-bottom">Jill</td>
        <td class="top-bottom">Smith</td>
        <td class="top-bottom">50</td>
        <td class="top-bottom">Jill</td>
        <td class="top-bottom">Smith</td>
        <td class="top-bottom">50</td>
        <td class="top-bottom">Jill</td>
        <td class="top-bottom">Smith</td>
    </tr>

    <tr>
        <td class="side">Jiaaall</td>
        <td colspan="9">Saamith</td>
        <td class="side">5aa0</td>
    </tr>

    <tr>
        <td class="side">Jaaill</td>
        <td colspan="9">aaaSmith</td>
        <td class="side">5aa0</td>
    </tr>

    <tr>
        <td class="side">Jiaaall</td>
        <td colspan="9">Smaaith</td>
        <td class="side">5aa0</td>
    </tr>


</table>

td从其他td复制宽度

1 个答案: