Question

如何为表的列定义一些常规属性？例如，在下表中我有2列。我希望左列的宽度为30px，右列的宽度为70px。对于下面的示例，我在每一行都写了一个CSS类名。有没有办法让我能以更一般的方式做到这一点？感谢。

<table width="100px" cellspacing="0">
            <tbody>
                <tr>                
                    <td class="left">30px wide</td>
                    <td class="right">70px wide</td>
                </tr>

                <tr>                
                    <td class="left">30px wide</td>
                    <td class="right">70px wide</td>
                </tr>

                <tr>                
                    <td class="left">30px wide</td>
                    <td class="right">70px wide</td>
                </tr>

                <tr>                
                    <td class="left">30px wide</td>
                    <td class="right">70px wide</td>
                </tr>       

            </tbody>
        </table>

Answer 1

足以定义第一个TD ......它看起来像：

<table width="100px" cellspacing="0">
            <tbody>
                <tr>                
                    <td class="left">30px wide</td>
                    <td class="right">70px wide</td>
                </tr>
                <tr>                
                    <td>30px wide</td>
                    <td>70px wide</td>
                </tr>

                <tr>                
                    <td>30px wide</td>
                    <td>70px wide</td>
                </tr>

                <tr>                
                    <td>30px wide</td>
                    <td>70px wide</td>
                </tr>       

            </tbody>
        </table>

Answer 2

接下来，我在每一行写css类名。有没有办法让我能以更一般的方式做到这一点？

我认为你的意思是“......在每个列中”。不，如果您想要跨浏览器支持，目前这确实是唯一的方法。

在CSS 3中，有:nth-child伪类，但只有FF >= 3.5 and Chrome.完全支持

Answer 3

只需在第一行中定义td的类。请参阅example。

Answer 4

对表格的第一行使用<th>标记，然后您可以：

th.left {
 width: 30px;
}

th.right {
 width: 70px;
}

Answer 5

您可以使用<col>元素一次定义列的宽度。像

这样的东西

<table>
 <col class="left">
 <col class="right">
 <tr>
  <td>30px wide</td>
  <td>70px wide</td>
 </tr>
 <tr>
  <td>30px wide</td>
  <td>70px wide</td>
 </tr>
</table>

请注意，您可以设置的样式非常有限 - 到目前为止，只有width和background-color适用于我（在Chrome 9中）。因此，如果您为该类设置了其他任何内容（字体大小，文本颜色，对齐方式等），您可能希望坚持在每个<td>上保留该类。

在CSS中定义表列的常规宽度

5 个答案: