Question

我在表中的CSS方面存在问题，尤其是字体大小方面的问题。每个单元格的字体大小应与td { font-size: 1.5rem; }相同，但是如果右侧单元格中的文本变长，则表格左侧的单元格的字体大小将小于右侧的字体大小。

仅当在移动客户端上访问网站时，才会出现此问题。

CSS：

html {
    font-size: 62.5%;
}

@media (hover: none) {
    html {
        font-size: 125%;
    }
}

table {
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 1.5rem;
}

table.fullwidth {
    width: 100%;
}

tr {
    border-bottom: 1px solid rgb(229, 229, 229);
}

tr:hover {
    background-color: rgb(245, 245, 245);
}

td {
    padding: 1rem;
    font-size: 1.5rem;
}

td > b {
    font-size: 1.5rem;
}

td.wordbreak {
    word-break: break-word;
}

HTML：

<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="content">
        <div>
            <table class="fullwidth">
                <tbody>
                    <tr>
                        <td><b>Title 1</b></td>
                        <td class="wordbreak">Content</td>
                    </tr>
                    <tr>
                        <td><b>Title 2</b></td>
                        <td class="wordbreak">Content 2</td>
                    </tr>
                    <tr>
                        <td><b>Title 3</b></td>
                        <td class="wordbreak">Content 3</td>
                    </tr>
                    <tr>
                        <td><b>Title 4</b></td>
                        <td class="wordbreak">
                            Content 4
                        </td>
                    </tr>
                    <tr>
                        <td><b>Title 5</b></td>
                        <td class="wordbreak">Content 5</td>
                    </tr>
                    <tr>
                        <td><b>Title 6</b></td>
                        <td class="wordbreak">Content 6</td>
                    </tr>
                    <tr>
                        <td><b>Title 7</b></td>
                        <td class="wordbreak">
                            This is a very long text which leads to css problems. This is a very long text which leads to css problems. This is a very long text which leads to css problems. This is a very long text which leads to css problems. This is a very long text which leads to css problems. This is a very long text which leads to css problems.
                        </td>
                    </tr>
                    <tr>
                        <td><b>Title 8</b></td>
                        <td class="wordbreak">Content 8</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</body>
</html>

我认为此代码中所有单元格的字体大小都应相同，但是，如果右侧单元格中的文本变长，则左侧单元格的字体大小会较小。

您知道解决方案吗？

编辑1

我认为问题出在此代码段中：

html {
    font-size: 62.5%;
}
@media (hover: none) {
    html {
        /* THIS IS PROBLEMATIC */
        font-size: 125%;
    }
}

当我删除带有注释的行时，表格单元格内的字体大小很小，但至少都相同。

编辑2

css代码table { table-layout: fixed; }似乎解决了这个问题。

Answer 1

使用表头，合并CSS并删除粗体。这样，如果您希望对标题设置不同的样式，就很容易。

<tr>
     <th>Title 1</th>
     <td>Content</td>
</tr>

css：

td, th {
    padding: 1rem;
    font-size: 1.5rem;
    word-break: break-word;
}

th {
  word-break: normal;
}

如果文本变长，为什么表格单元格中的字体大小无法正常工作？

1 个答案: