使用表格布局在表格中设置 td 宽度：固定答案

【问题标题】：Set td width in table with table-layout: fixed使用表格布局在表格中设置 td 宽度：固定
【发布时间】：2015-10-09 09:01:24
【问题描述】：

据我所知，列宽由表格的第一行决定。我的问题是表中的第一个 td 将 colspan 设置为“2”。这是我的桌子的样子。重要的是我不能改变表格的 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' 成为某种标题，下面的 td 元素被分割为 30/70。

【问题讨论】：

啊抱歉，没看那部分，似乎唯一的办法就是更改 html 并添加 cols：stackoverflow.com/questions/13841700/…

标签： html css tablelayout

【解决方案1】：

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

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

【讨论】：

我认为固定布局的重点是让分词起作用
@Pete Fair 点。不多，但要更改 html（我知道他/她不能这样做）。没有与浏览器一致的解决方法，我可以查看是否需要修复布局...

【解决方案2】：

$('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>

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

【讨论】：

这很棒。我的问题更加复杂。你能参考一下这个编辑吗？
@user1346765 你说的复杂是什么意思，我无法理解
嗯，你的回答对于我之前只有两个“tr”元素的代码是正确的。现在我添加了更多元素，因此以 2 作为参数的伪选择器 :nth-child(2) 将不再起作用。
@user1346765 你的html结构是静态的还是动态的？
@user1346765 你能告诉我你想要什么。/??

【解决方案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%;
}

【讨论】：