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

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

html css

Html 指定列的宽度和文本对齐方式,html,css,Html,Css,是否可以使用css以百分比的形式指定表格列的宽度？还可以指定特定列的文本对齐方式吗例如，我有一个有3列的表。我想说 col1.width = 20% col2.width = 40% col3.width = 40% col1.text-align = left; col2.text-align = right; col3.text-align = center; 您可以这样做，但此时您的宽度相对于父容器。关于第一个问题：创建分配给每个列的类。很简单文本的对齐有点困难，因为您只能指定

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

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

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

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

您可以这样做，但此时您的

宽度相对于父容器。

关于第一个问题：创建分配给每个

列的类。很简单
文本的对齐有点困难，因为您只能指定一个整体。在这种情况下，一种解决方案是使用第n个子类，但这是CSS 3特有的特性，在当前任何版本的Internet Explorer中都不起作用。正如建议的那样，您还可以使用+
组合器来设置相邻列的样式。这是CSS 2.1的一个特性

柱样式
桌子{
表布局：固定；
宽度：1000px；
}
.第一栏{
宽度：20%；
背景：#ccc；
}
.其他栏目{
宽度：40%；
背景：#eee；
}
td{text align:left}
td+td{文本对齐：右}
td+td+td{文本对齐：中间}
布拉
布拉
布拉
布拉
布拉
布拉
布拉
布拉
布拉
我该怎么做？我必须给每个td元素一个类吗？或者将tds包装在一个div中并指定div的宽度？哪种方法正确？
<!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>