带CSS的HTML：如何在表格中设置字体样式？

Question

我有一些HTML代码：

<table class="hometable">
  <tbody>
    <tr>
      <td>The quick brown fox jumps over the lazy dog.</td>
    </tr>
  </tbody>
</table>

使用CSS：

table.hometable {
  border-spacing: 2px 2px;
  border-collapse: separate; 
  width: 100%;
}

table.hometable td {
  vertical-align: top;
  padding: 2px;
}

如何在fox字下划线？

Answer 1

无法使用纯CSS，但您可以在span元素中包装fox，并使用text-decoration: underline设置样式。

table.hometable {
  border-spacing: 2px 2px;
  border-collapse: separate; 
  width: 100%;
}

table.hometable td {
  vertical-align: top;
  padding: 2px;
}

table.hometable span {text-decoration: underline}

<table class="hometable">
  <tbody>
    <tr>
      <td>The quick brown <span>fox</span> jumps over the lazy dog.</td>
    </tr>
  </tbody>
</table>

Answer 2

给它span并应用border-bottom或text-decoration:underline：

table.hometable {
  border-spacing: 2px 2px;
  border-collapse: separate;
  width: 100%;
}
table.hometable td {
  vertical-align: top;
  padding: 2px;
}
.one span {
  border-bottom: 1px red solid
}
.two span {
  text-decoration: underline red
}

<table class="hometable one">
  <tbody>
    <tr>
      <td>The quick brown <span>fox</span> jumps over the lazy dog.</td>
    </tr>
  </tbody>
</table>

<table class="hometable two">
  <tbody>
    <tr>
      <td>The quick brown <span>fox</span> jumps over the lazy dog.</td>
    </tr>
  </tbody>
</table>