指定某些列的宽度

Question

我有一个表格的五列布局，我想要进行以下设置

C1 S1 C2 S2 C3（内容，间隔物，内容......），其中C1，C2和C3具有相同的宽度（此时未知），S1和S2具有44像素的固定宽度。如何指定每个表列的宽度？ S1和S2很简单：

.spacer {
    width: 44px;
}

但其他的呢？

.contentcolumn {
    width: ???;
}

该表的动态宽度为＆＃34; 100％＆＃34;，我希望避免使其成为固定宽度并自行进行算术的麻烦。

http://jsfiddle.net/B35Ap/

这是我的HTML：

<div style="width: 400px">
<table style="width: 100%">
    <tr>
        <td id="c1">foo </td>
        <td id="s1"></td>
        <td id="c2">bar bar</td>
        <td id="s2"></td>
        <td id="c3">baz baz baz</td>
    </tr>
</table>
</div>

这就是CSS：

tr {
     height: 40px;
}


#c1, #c2, #c3 {
    width: auto;
    background-color: yellow;
}

#s1, #s2 {
    width: 44px;
}

这给了我：

但我希望第1,3和5栏的宽度相等。

Answer 1

浏览器计算

的宽度

.contentcolumn {
    width: auto;
}

由于您的表格宽度为100％，因此应尽可能填充列，以便浏览器适合它们。

在表格中添加ID并使用

#yourtable { display:table; table-layout: fixed;}

强制列相等（但保持间隔宽度）

fiddle

Answer 2

我知道你正在使用一张桌子。我用列表做了一些事。也许它可以帮助你... jsFiddle

<强> HTML：

<ul>
  <li>Col1</li>
  <li>Col2</li>
  <li>Col3</li> 
</ul>

<强> CSS：

ul {
    padding: 0; 
    column-count:3;
}

点击此链接CSS3 Multiple Columns

Answer 3

您可以为每列设置特定的ID，同时仍保留样式的类。

HTML

<table>
    <tr>
        <td class="contentColumn" id="C1">C1</td>
        <td class="spacer">S1</td>
        <td class="contentColumn" id="C2">C2</td>
        <td class="spacer">S2</td>
        <td class="contentColumn" id="C3">C3</td>
    </tr>
</table>

CSS

.spacer {
    width: 44px;
}

.contentColumn {
    background-color: gray;
}

#C1 {
    width: 100px;
}
#C2 {
    width: 150px;
}
#C3 {
    width: 200px;
}

另一种方法是使用css选择器:nth-child，在这种情况下你的css可能类似于：

td:nth-child(odd){
   /*here you can set the style of every odd column -- your content*/
}
td:nth-child(even){
   /*here you can set the style of every even column -- your spacers*/
}
td:nth-child(1){
   /*here you can set the style of your first column*/
}
td:nth-child(3){
   /*here you can set the style of your third column*/
}
etc...