How to Create Vertically Aligned HTML Tables with Column-Based Display?

Vertically Aligned HTML Tables: Achieving Column-Based Display

Vertical tables, where rows are displayed vertically with table headers on the left, present a unique challenge in HTML. Here's a simple solution to this issue, using CSS:

<code class="css">tr {
  display: block;
  float: left;
}
th, td {
  display: block;
}</code>

This approach effectively flips the orientation of table cells, allowing you to access them using just as you would in a regular table. However, it's important to note that this method treats each cell as a single line, dropping any table-like behaviors such as rowspan or colspan.

Example:

To illustrate this, consider the following HTML table marked up with the proposed CSS:

<code class="html"><table>
  <tr>
    <th>name</th>
    <th>number</th>
  </tr>
  <tr>
    <td>James Bond</td>
    <td>007</td>
  </tr>
  <tr>
    <td>Lucipher</td>
    <td>666</td>
  </tr>
</table></code>

The result will be a vertically aligned table with two "rows" (represented as columns) and two "columns" (represented as rows).

Additional Considerations:

To ensure proper border rendering, you can add the following CSS:

<code class="css">/* border-collapse */
tr>*:not(:first-child) { border-top: 0; }
tr:not(:first-child)>* { border-left: 0; }</code>

This will remove the top and left borders from all cells except the first one in each row (column), effectively creating a borderless appearance.

The above is the detailed content of How to Create Vertically Aligned HTML Tables with Column-Based Display?. For more information, please follow other related articles on the PHP Chinese website!