html表格布局缩小会乱,HTML/CSS表格布局固定但希望一个td的宽度更小

我有一个包含4列的表格。我希望第一个是固定的5％，接下来的3个是固定的20％。所以为了确保最后3个宽度总是与我使用的宽度相同table-layout:fixed。但是，这导致第一个td与最后3列的宽度相同。HTML/CSS表格布局固定但希望一个td的宽度更小

这里是我的HTML：

{{COMPONENT_NAME}}{{CO}}{{PANEL_OPTIONS}}

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

注意，我知道，我还没有包括在这个

看起来像这应该很容易，但不会工作。

那么这里是我的全部代码：

	Component	Description	Panel
	{{COMPONENT_NAME}}	{{COMPONET_DESCRIPTION}}	{{PANEL_OPTIONS}}

+0

为什么你不用纯HTML做这个，如果这个CSS是给的问题。如果将是一个非常有用的，你可以在[jsfiddle](http://jsfiddle.net/QWsZT/) –

2012-07-27 02:22:35

+0

中创建这个场景这里是我的场景是jsfiddle： http://jsfiddle.net/QWsZT/1/ –

2012-07-27 02:35:05