Question

我对CSS有点生疏。

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

问题2：我已经更正了代码（在代码段中），但它似乎无法在IE或Chrome上运行。有谁能说出原因？看起来对我来说很好，并在网上模拟，但不是当我将其保存在HTML文档中时。第一列没有显示为Bold;并且列宽已关闭..

PS。：不能在文档中添加标签中的样式，因为行将以名义方式创建。

请让我们尝试保持代码简单。

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

定位td:first-child而不是tr:first-child

此外，CSS声明以;终止。 HTML中使用<br>元素在文本中生成换行符。

另请注意，td始终是tr的孩子，因此在这种情况下您不需要声明tr td:first-child。同样，tr是table的孩子，因此您也不需要table。

＆＃13;

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
}

＆＃13;

<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>

＆＃13;

Answer 2

简单。存在很多方法来做到这一点。一种方法是在标签中应用直接样式。我的意思是在style=""标记中打开<td>属性。将如下所示：<td style="font-weight: bold">

Answer 3

布朗瑟兼容性的问题也许。它在Chrome上运行良好。

如何将第一个表列设置为粗体（CSS）

3 个答案: