Menu
How can I make the table header appear on the left side of the table as a column instead on the top as a row? I have this markup:
<table> <thead> <tr> <th>a</th> <th>b</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>2</td> </tr> </tbody> </table> 
873
The trick is to use display: inline-block; on the table rows and white-space: nowrap; on the table body.
Tables in HTML can have horizontal as well as the vertical header. For the horizontal header, you need to set all <th> inside a single <tr> tag i.e. row, that will be the topmost.
The <th> tag defines a header cell in an HTML table. An HTML table has two kinds of cells: Header cells - contains header information (created with the <th> element) Data cells - contains data (created with the <td> element)
Just use <th> as the first element in the row. Then add the scope attribute, which has no visual impact, but you could use it e.g. in CSS.
<table> <tbody> <tr> <th scope="row">A</th> <td>b</td> </tr> <tr> <th scope="row">C</th> <td>d</td> </tr> </tbody> </table> See also http://www.w3.org/TR/WCAG20-TECHS/H63
157
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
