使用 table-layout 在 table 中设置 td 宽度：固定

Question

据我所知，列宽由 table 的第一行决定。我的问题是 table 中的第一个 td 将 colspan 设置为“2”。这是我的 table 的样子。重要的是我无法更改 table 的 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 = '2' 变成某种 header 并且下面的 td 元素被分成 30/70。

Answer 1

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

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

Answer 2

您可以通过使用一些伪选择器来实现此目的，但它在 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%;
}

Answer 3

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

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;
}

<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>

这里我用你的新要求更新了我的全部答案请看这里

使用 table-layout 在 table 中设置 td 宽度：固定

Set td width in table with table-layout: fixed

html

css

tablelayout