2

我有一张有 4 列的表。我希望第一个是固定的 5%，接下来的 3 个是固定的 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>
4

5 回答 5

1

那应该工作得很好。这不是你所有的HTML，对吧？确保您也声明了表类。我已经编辑了代码以考虑您的整个 HTML 示例。问题是您声明的 ths 没有 CSS 规则，因此它们影响了 tds 的宽度。让我知道这是否仍然不起作用，尽管它在 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;}
于 2012-07-27T02:23:44.120 回答
1

啊! 我找到了。在我决定使用 table-layout: 修复之前，我在这里有这个：

.creatorOptionsTable {width: 80%;}

把它拿出来，它是固定的。无论如何，谢谢你们的帮助！

于 2012-07-27T02:41:39.560 回答
1

啊，所以你在你的标签中做一个愚蠢的错误检查你写的东西

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

你认为它对吗？

于 2012-07-27T04:41:45.573 回答
1

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

.creatorOptionsTable { width: 80%; }

这会将表格元素设置为父元素的 80%。因此，如果您的父级是 1000 像素——这将告诉浏览器，“让这个表成为 800 像素”。然后，它对列的宽度进行排序。

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

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

于 2012-07-27T11:14:23.310 回答
0

将一般宽度设置td为 like30px并用 固定max-width，然后将其他 3 的宽度设置为 20% 并重复出现+td（td+td表示第二个td和 on，td+td+td表示第三个td和 on，等等...）

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

还将表格放在div宽度为 80% 的 a 中，并将表格的宽度设置为100%：

div.container {
    max-width: 80%;
}
.creatorOptionsTable {
    width: 100%;
    word-wrap: break-word;
}
于 2012-07-27T11:20:41.060 回答