html - 如何将第一个表格列设置为粗体(CSS)

Question

我对 CSS 有点生疏。

问题 1:我正在尝试制作下面的示例表格。我只希望第一列始终以粗体显示。任何人都可以帮助我使 td 第一个 child 的论点起作用吗？ 状态:已解决...我混合了行和列...非常愚蠢的错误引起了我的注意。 - 谢谢 Ovokuro

问题 2:我已更正代码(在代码段中)，但它似乎无法在 IE 或 Chrome 上运行。谁能说出为什么？对我来说看起来不错并且可以在在线 sim 上工作，但是当我将它保存在 html 文档中时就不行了。第一列未显示为粗体；并且列宽关闭..

PS.: 不能在文档的标签中添加样式，因为行将以编程方式创建。

请让我们尽量保持代码简单。

table {
  font-size: 16px;
  font-family: Optimum, Helvetica, sans-serif;
  border-collapse:collapse
}
tr {
    border-bottom: 1px solid #A9A9A9;
}
td {
  padding: 4px;
  margin: 3px;
  padding-left: 20px;
  width: 75%;
  text-align: justify;
}

th {
  background-color: #A9A9A9;
  color: #FFF;
  font-weight: bold;
  font-size: 28px;
  text-align: center;
}

td:first-child {
  font-weight: bold;
  width: 25%;
  text-align: left;
}

<table class="table">
  <thead>
    <tr class="firstrow">
      <th colspan="2">Sample</th>
    </tr>
  </thead>
  <tbody>
<tr><td>Line 1</td><td>Text</td></tr><tr><td>Line 2</td><td>Text</td></tr></tbody></table>

Answer 1

目标 td:first-child而不是 tr:first-child

此外，CSS 声明以 ; 结束。 . <br>元素在 HTML 中用于在文本中产生换行符。

另请注意 td永远是 tr 的 child , 所以你不需要声明 tr td:first-child在这种情况下。同样，tr是 table 的 child 所以你不需要table要么。

table {
  font-size: 12px;
  border: 1px solid #CCC;
  font-family: Arial, Helvetica, sans-serif;
}

td {
  padding: 4px;
  margin: 3px;
  border: 1px solid #CCC;
}

th {
  background-color: #104E8B;
  color: #FFF;
  font-weight: bold;
}

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

<table class="table">
  <thead>
    <tr class="firstrow">
      <th colspan="2">Sample Table</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1st Column </td>
      <td>Text</td>
    </tr>
  </tbody>
</table>