HTML/CSS表格布局已修复，但希望一个td的宽度较小

Question

我有一个有4列的表。我希望第一个是固定的5%，下一个是固定20%。因此，为了确保最后3个总是相同的宽度，我使用table-layout:fixed。然而，这导致第一个td与最后3列的宽度相同。

这是我的HTML:

<tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{CO}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>

还有我的CSS：

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;}
.creatorOptionsTable tr {border-bottom: 1px solid black;}
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black;    word-wrap: break-word}
 .creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}

注意，我知道我还没有在其中包含<table>标记。但它就在那里。

看起来这应该很容易，但行不通。

---

这是我的全部代码：

 <table id="creatorOptionsAddTable" class="creatorOptionsTable">
<tr class="firstRow">
    <th clas="groupsOptionsCheckboxCell"></th>
    <th>Component</th>
    <th>Description</th>
    <th>Panel</th>
</tr>
 <tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{COMPONET_DESCRIPTION}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
</table>

Answer 1

首先，您误解了这意味着什么：

.creatorOptionsTable { width: 80%; }

这将表元素设置为父元素的80%。因此，如果你的父母是1000px——这将告诉浏览器，"让这个表是800px"。然后，它对列的宽度进行排序。

其次，如果要设置每列的宽度，它必须等于100%。浏览器无法计算所有总计小于100%的列。这就像是说：有8片披萨：乔吃了1片，约翰吃了2片，山姆吃了2块，史蒂夫吃了2——我们吃了整个披萨——假的。

理解这一点，如果您希望一列是其他三列的1/4。应该是8%，30%，31%，31%（或者只做10，30，30，30%）。或者你可以将3的宽度设置为相同，窄的将填满剩余的空间。

Answer 2

啊！我找到了。在我决定使用表格布局之前，我在这里有这个：修复：

.creatorOptionsTable {width: 80%;}

把它拿出来，它就修好了。无论如何，伙计们，谢谢你们的帮助！

Answer 3

ahhh所以你在你的th标签中做了一个愚蠢的错误检查你写了什么

<th clas="groupsOptionsCheckboxCell"></th>

你认为这是对的吗。

Answer 4

这应该很好用。这还不是你的全部HTML，对吧？确保您也声明了表类。我已经编辑了代码，将您的整个HTML示例考虑在内。问题是你没有为ths声明CSS规则，所以它们影响了你的td的宽度。如果这仍然不起作用，请告诉我，尽管它在jsfiddle中运行良好(http://jsfiddle.net/QWsZT/2/)。

HTML:

<table id="creatorOptionsAddTable" class="creatorOptionsTable">
<tr class="firstRow">
    <th class="groupsOptionsCheckboxCell"></th>
    <th>Component</th>
    <th>Description</th>
    <th>Panel</th>
</tr>
 <tr>
<td class="groupsOptionsCheckboxCell"><input type="checkbox"/></td>
<td>{{COMPONENT_NAME}}</td>
<td>{{COMPONET_DESCRIPTION}}</td>
<td>{{PANEL_OPTIONS}}</td>
</tr>
</table>

CSS：

.creatorOptionsTable {border-collapse: collapse; width: 80%; table-layout: fixed;}
.creatorOptionsTable tr {border-top: 1px solid black;}
.creatorOptionsTable tr.firstRow {border-top: none;}
.creatorOptionsTable td {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word}
.creatorOptionsTable td.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}
.creatorOptionsTable th {padding: 5px 3%; width: 20%; border-left: 1px solid black; word-wrap: break-word}
.creatorOptionsTable th.groupsOptionsCheckboxCell, .creatorOptionsTable th.groupsOptionsCheckboxCell {width: 5% !important;  text-align: center; border-left: none;}

Answer 5

将td的一般宽度设置为类似30px并用max-width固定，然后将其他3的宽度设置为20%并用重复的+td（td+td表示第二个td及以上，td+td+td表示第三个td及以上，等等…）

/*Set first (general) width fixed*/
.creatorOptionsTable td {
    width: 30px;
    max-width: 30px;
}
/*Set recurring cells' width 20%*/
.creatorOptionsTable td+td {
    width: 20%;
}

还将表格放在宽度为80%的div内，并将表格的宽度设置为100%:

div.container {
    max-width: 80%;
}
.creatorOptionsTable {
    width: 100%;
    word-wrap: break-word;
}