How to Create Vertical Table Headers with CSS in HTML?

Vertical Table Headers in HTML

In standard HTML tables, rows are displayed horizontally, with table headers located at the top. However, there are situations where you may want to create tables with vertical rows and headers on the left side.

To achieve this, you can leverage CSS to modify the display of rows and table cells. A simple CSS fix would be:

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

This CSS code forces each row to display as a block element and float to the left, effectively creating vertical rows. The display: block; setting on table cells ensures that they also display as blocks within the vertical rows.

Note that this CSS solution assumes that your table cells are single-line. If you have multi-line cells, the table behavior may break down.

To enhance the display, you can add additional CSS rules to manage borders and remove borders where they are not needed:

<code class="css">/* single-row column design */
tr { display: block; float: left; }
th, td { display: block; border: 1px solid black; }

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

With this CSS, you can create tables with vertical rows that are both visually appealing and maintain the functionality of accessible rows via tags.

The above is the detailed content of How to Create Vertical Table Headers with CSS in HTML?. For more information, please follow other related articles on the PHP Chinese website!