Inline table

<thead> appears like a column, and <td> like rows

by Marion Hurteau

HTML

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>a1</td>
      <td>b1</td>
    </tr>
    <tr>
      <td>a2</td>
      <td>b2</td>
    </tr>
    <tr>
      <td>a3</td>
      <td>b3</td>
    </tr>
  </tbody>
</table>

CSS

table, td, th {
  border: 1px solid red;
}

thead {
  float: left;
}

thead th {
  display: block;
  background: yellow;
}

tbody {
  float: left;
}

tbody tr {
  display: block;
  float: left;
}

tbody td {
  display: block;
}