将所有包含表列的文本向左对齐,将所有包含数字的列向右对齐



第一次在论坛上发帖。

我不是一个开发人员,只是偶尔尝试为个人目的编写代码。原谅我的无知。

我想做的是:我创建了一个HTML表,我希望通过某种方式(最好只使用CSS(使所有包含文本的列向左对齐,所有包含数字的列向右对齐;基本上就是Excel或任何电子表格程序所做的。

我知道我可以手动对齐各个td,但我正在寻找一些方法,使其在多个大表中自动通用。

我希望我的解释足够易懂。有什么想法吗?

我不认为你只能在css中做到这一点,但我有一个使用javascript的选项。

我刚刚做了这个简单的代码,用于检查您的td是否是数字或文本。脚本只为每个td.添加一个类

table,
td,
th {
border: 1px solid black;
padding: 5px;
}
table {
border-collapse: collapse;
}
td.align-right {
text-align: right;
}
td.align-left {
text-align: left;
}
<!DOCTYPE html>
<html>
<head>
<title>Table</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
<table>
<tr>
<th>Something</th>
<th>Something else</th>
</tr>
<tr>
<td>0</td>
<td>text</td>
</tr>
<tr>
<td>text</td>
<td>23454</td>
</tr>
<tr>
<td>text</td>
<td>text</td>
</tr>
</table>
</body>
</html>
<script>
const tdEls = Array.from(document.getElementsByTagName("td"));
tdEls.forEach((td) => {
if (isNaN(td.innerHTML)) {
td.classList.add("align-left");
} else {
td.classList.add("align-right");
}
});
</script>

最新更新