表中列的宽度不同

Question

创建HTML表格时遇到了一些麻烦。

我想将奇数列中的宽度从左到右（红色）形成10％，70％和30％。偶数列的宽度为50％，从左到右的宽度为50％（蓝色）。

顺便说一句，我可以在CSS设置宽度吗？

HTML：

<table id="report" class="display" width="100%">
    <thead>
        <tr>
            <th>Gorup #</th>
            <th>Match Key</th>
            <th>Mail Type</th>
            <th></th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr class="top">
            <th>0</th>
            <th>Match Key</th>
            <th>Marketing</th>
        </tr>
        <tr class="top">
            <th>
                <table border="1">
                    <tr>
                        <th>sample_path_01</th>
                    </tr>
                    <tr>
                        <th>sample_path_02</th>
                    </tr>
                    <tr>
                        <th>sample_path_03</th>
                    </tr>
                </table>
            </th>
            <th>
                <li>Screenshot</li>
            </th>
        </tr>
        <tr class="top">
            <th>1</th>
            <th>Match Key</th>
            <th>Marketing</th>
        </tr>
        <tr class="top">
            <th>
                <table border="1">
                    <tr>
                        <th>sample_path_01</th>
                    </tr>
                    <tr>
                        <th>sample_path_02</th>
                    </tr>
                    <tr>
                        <th>sample_path_03</th>
                    </tr>
                </table>
            </th>
            <th>
                <li>Screenshot</li>
            </th>
        </tr>
    </tbody>
</table>

JS Fiddle

Answer 1

只需查看表格，发现其格式不正确。

表中缺少

<th>。

表结构应该是这样的。

<table id="report" class="display" width="100%">
            <thead>
                <tr>
                    <th>Gorup #</th>
                    <th>Match Key</th>
                    <th>Mail Type</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <th>0</th>
                    <th>Match Key</th>
                    <th>Marketing</th>
                </tr>
                <tr>
                    <th>
                        <table border="1" colspan="2">
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                        </table>
                    </th>
                    <th>
                        <li>Screenshot</li>
                    </th>
                     <th>&nbsp;</th>
                </tr>
                <tr>
                    <th>1</th>
                    <th>Match Key</th>
                    <th>Marketing</th>
                </tr>
                <tr>
                    <th>
                        <table border="1">
                          <tr><th>sample_path_01</th></tr>
                          <tr><th>sample_path_02</th></tr>
                          <tr><th>sample_path_03</th></tr>
                        </table>
                    </th>
                    <th>
                        <li>Screenshot</li>
                    </th>
                    <th>&nbsp;</th>
                </tr>
    </tbody>
</table>

这对于不同宽度的第一行列实际上是不可能的，而对于另一行列具有不同的宽度。

无论如何，你可以在列中给出宽度不同的宽度

这里是一些修改过的CSS代码。

#report > tbody > tr:nth-child(odd) > th{
        background-color: #f00;
}

#report > tbody > tr:nth-child(odd) > th:nth-child(1){width:10%; color:#fff;}
#report > tbody > tr:nth-child(odd) > th:nth-child(2){width:70%; color:#00CC33;}
#report > tbody > tr:nth-child(odd) > th:nth-child(3){width:30%; color:#CC9900;}
#report > tbody > tr:nth-child(even) > th{
        background-color: #00f;
}

Answer 2

CSS

#report > tbody > tr:nth-child(odd) > th:first-child{
    width:10%;
    background-color: #f00;
}
#report > tbody > tr:nth-child(odd) > th:last-child{
    background-color: #f00;
    width:20%;
}
#report > tbody > tr:nth-child(odd) > th:nth-child(2){
    background-color: #f00;
    width:70%;
}
#report > tbody > tr:nth-child(even) > th{
    background-color: #00f;
     width=50%;
}

Answer 3

您可以这样写：

table tr th：first-child {width：10％}

table tr th：nth-​​child（3）{width：70％}

table tr th：nth-​​child（5）{width：30％}

table tr th：nth-​​child（even）{width：50％}