gpt4 book ai didi

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

转载 作者:搜寻专家 更新时间:2023-10-31 19:28:49 24 4
gpt4 key购买 nike

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

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

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

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

最佳答案

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

文本的对齐有点困难,因为你只能分配一个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>

关于html - 指定列的宽度和文本对齐方式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3048474/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com