html - 如何使用 CSS 或 HTML 将特定的 HTML 行和列加粗？

Question

我想将 HTML 表格的第一行和第一列(第 0 行和第 0 列)加粗。如何使用 HTML 或 CSS 来做到这一点？

表格:

<table border="1">
    <tbody>
        <tr>
            <td></td>
            <td>translate.com AND https://translate.google.com/</td>
            <td>http://www.bing.com/translator/</td>
        </tr>
        <tr>
            <td>I eat tacos</td>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    . . .
    </tbody>
</table>

...和 ​​CSS:

body {
    font-family: "Segoe UI", "Calibri", "Candara", "Bookman Old Style", "Consolas", sans-serif;
    font-size: 1.2em;
    color: navy;
}

...非常基础。

表格在这里:http://jsfiddle.net/clayshannon/LU7qm/7/

Answer 1

要使用 CSS 加粗第一行和第一列，使用您当前的 HTML 标记，请使用 :first-child伪类，它匹配作为其父元素的第一个子元素(第一个子元素)的任何元素:

tr:first-child, td:first-child { font-weight: bold }

但是，如果这些单元格是标题单元格(对于同一列或同一行中的其他单元格)，使用 th 可能更合乎逻辑。元素并将第一行包装在 thead 元素中:

<table border="1">
    <thead>
        <tr>
            <th></th>
            <th>translate.com AND https://translate.google.com/</th>
            <th>http://www.bing.com/translator/</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>I eat tacos</th>
            <td>Yo como tacos</td>
            <td>Comer tacos</td>
        </tr>
    <!-- other rows here -->
    </tbody>
</table>

th 元素默认以粗体显示(尽管您仍然可以使用 CSS 明确表示)。它们也将默认居中；如果你不想要那个，你可以很容易地用 CSS 覆盖它，例如th { text-align: left }.

在这种情况下，第一行看起来很像标题行，因此我将其设为 thead 和 th。这可能很有用，例如因为如果页面被打印并且表格被分成两页或更多页，许多浏览器会在新页面的开头重复该行。至于每行的第一个单元格，最好将它们保留为 td 并根据需要设置为粗体。