How do I make vertical tables in HTML? By vertical, I mean the rows will be vertical with table headers on the left.
I also need it the way so I can access these rows (in this case vertical) as in a normal table, with <tr>
. This is because I get the data dynamically for one row (like for row A) and insert it in the table. I am using angularJS to avoid DOM manipulation, so I am not looking for complex DOM manipulation with Javascript.
To place an item at the top or bottom of its cell, insert the "VALIGN=" attribute within the code for that cell. To vertically align an entire row (e.g., placing all data in that row at the tops of the cells), insert the "VALIGN=" attribute within the code for that row.
An HTML column is defined in the <div> tag using the class = "column" keyword. More columns can be added by adding more divs with the same class. The following syntax is used to add columns in HTML. <div class="row"> tag is used to initialize the row where all the columns will be added.
Rows represent the data vertically in a table.
If you want <tr>
to display columns, not rows, try this simple CSS
tr { display: block; float: left; }
th, td { display: block; }
This should display what you want as far as you work with single-line cells (table behavior is dropped).
/* 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; }
<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>
David Bushell has provided a solution and implementation here: http://dbushell.com/demos/tables/rt_05-01-12.html
The trick is to use
display: inline-block;
on the table rows andwhite-space: nowrap;
on the table body.
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