CODEWITHSUNDEEP
htmlcss
Danijel
Danijel

Reputation: 8602

HTML with CSS: How to style font in a table?

I have some HTML code: 

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

with CSS: 

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

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

How can I underline the word fox?

Upvotes: 0

Views: 86

Answers (2)

potashin
potashin

Reputation: 44581

No way with pure CSS, but you can wrap fox in span element, for example, and style it with 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>

Upvotes: 2

dippas
dippas

Reputation: 60563

give it a span and apply a border-bottom or a 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>

Upvotes: 1

Related Questions