时间戳

首页 > 解决方案 > 将所有包含文本的表格列左对齐，所有包含数字的列右对齐

html - 将所有包含文本的表格列左对齐，所有包含数字的列右对齐

问题描述

第一次在论坛发帖。

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

我想要做的是：我创建了一个 HTML 表格，我想要某种方式（理想情况下只使用 CSS）让所有包含文本的列左对齐，所有包含数字的列右对齐；基本上是 Excel 或任何电子表格程序所做的。

我知道我可以手动对齐单个 td，但我宁愿寻找某种方法让它在多个大表中自动且普遍地发生。

我希望我的解释足够清晰。有任何想法吗？

标签： htmlcss

解决方案

我不认为你只能在 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>

推荐阅读