如何使用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,如果需要,它们可能最好保持为粗体样式.

Answer 2

CSS选择器:

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

说明:

:first-child用于选择一组元素的第一个子元素.例如:

<ul>
    <li>First</li>
    <li>Second/li>
    <li>Third</li>
    <li>Fourth</li>
</li>

li:first-child {}将覆盖第一个<li>.

为了实现你所要求的,我做了两件事,因为一个表是一组行.

1. tr:first-child td (第一个表行,所有td)
2. tr td:first-child (所有行,第一个td)

注意:规则#1和#2都将覆盖第一行,第一行td; 但这应该不是问题.