Question

是否可以使用css以百分比指定表格列的宽度？还可以指定特定列的文本对齐吗？

例如，我有一个包含3列的表。我想说

col1.width = 20%
col2.width = 40%
col3.width = 40%

col1.text-align = left;
col2.text-align = right;
col3.text-align = center;

Answer 1

关于第一个问题：创建分配给每个col umn的类。相当简单。

对齐文本有点困难，因为您只能指定few properties to table columns作为整体。在这种情况下，一种解决方案是使用nth-child伪类，但这是一个CSS 3特定功能，在任何当前版本的Internet Explorer中都不起作用。正如this answer建议的那样，您还可以使用+组合子来设置相邻列的样式。这是CSS 2.1功能supported by IE >= 7。

<!DOCTYPE html>
<head>
<meta charset=UTF-8>
<title>Column styling</title>
<style>
table {
    table-layout: fixed;
    width: 1000px;
}

.firstColumn {
    width: 20%;
    background: #ccc;
}

.otherColumns {
    width: 40%;
    background: #eee;
}

td       { text-align: left }
td+td    { text-align: right }
td+td+td { text-align: center }
</style>
</head>
<body>
<table>
    <col class="firstColumn">
    <col class="otherColumns">
    <col class="otherColumns">
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
    <tr>
        <td>bla</td>
        <td>bla</td>
        <td>bla</td>
    </tr>
</table>
</body>
</html>

Answer 2

您可以这样做，但此时<td>宽度相对于父容器。

指定列的宽度和文本对齐方式

2 个答案: