Question

据我所知，列宽由表的第一行决定。我的问题是表中的第一个td将colspan设置为＆＃39; 2＆＃39;。这是我的表格的样子。重要的是我无法更改表的HTML结构。

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
    </tbody>
</table>

CSS：

table {
    table-layout: fixed;
    width: 100%;
    word-wrap: break-word;
}

我需要的是将包含<ul>元素的td的宽度设置为30％。所以td colspan =＆＃39; 2＆＃39;成为某种标题，下面的td元素分为30/70。

Answer 1

取出table-layout: fixed;并将td:first-child { width: 30% }添加到您的CSS中。

http://jsfiddle.net/louis_feat/gcgk9y7e/

Answer 2

＆＃13;

$('strong').parents('tr').addClass('header_td'); // jquery line code...

＆＃13;

table {
    width: 100%;
    word-wrap: break-word;
}
table {   
    width: 100%;
    word-wrap: break-word;
    border: 2px solid black;
}
table tr:not(.header_td){
    background : red;
    color:white;
}
table tr:not(.header_td) td:first-child{
    max-width:30%; 
    width:30%;
    background:green;
}
table tr:not(.header_td) td{
    max-width:69%;  // 69% just only beacause some extra padding by element it self doesn't make chage t your structure.
    width:69%;
    background:black;
}
.header_td{
    background : grey;
}

＆＃13;

<table>
    <tbody>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td colspan="2"><strong>Personal Details</strong></td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
        <tr>
            <td>
                <ul>
                    <li>Title: </li>
                </ul>
            </td>
            <td>
                test
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

在这里，我用新要求更新了我的全部答案，请在此处查看

Answer 3

你可以通过使用一些伪选择器来实现这一点，但它在IE 6,7和8中不起作用：

table {
    table-layout: initial;
    width: 100%;
    word-wrap: break-word;
}

tr:not(:first-child) td{
    width: 70%;
}

tr:not(:first-child) td:first-child {
    width: 30%;
}

在table-layout中设置td宽度：fixed

3 个答案: