CODEWITHSUNDEEP
htmlcsshtml-table
Wai Wai
Wai Wai

Reputation: 25

HTML align inline-block horizontally?

In the following HTML, I want the "U" of USA aligning vertically with the "C" in the Canada and "M" in Mexico (which is done in current code). At the same time, I want "2015-2016" aligning with "USA" horizontally, rather than the center of "USA" and "Canada" now. What could I do?

span {
  display: inline-block;
  vertical-align: top;
}
<table>
  <tr>
    <td>2015-2016</td>
    <td><span>USA<br>Canada</span></td>
  </tr>
  <tr>
    <td>2014</td>
    <td>Mexico</td>
  </tr>
</table>

Upvotes: 1

Views: 33

Answers (1)

Johannes
Johannes

Reputation: 67776

Apply vertical-align: top; to all table cells:

(Note: You don't need the inline-block for the span, or actually, you don't need that span at all for what you want to achieve)

td {
  vertical-align: top;
}
<table>
  <tr>
    <td>2015-2016</td>
    <td>USA<br>Canada</td>
  </tr>
  <tr>
    <td>2014</td>
    <td>Mexico</td>
  </tr>
</table>

Upvotes: 2

Related Questions