Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

HTML align table rows on top

Tags:

I have an HTML table. It looks as follows:

<table>
    <tr>
        <td>Content one</td>
        <td rowspan="2"> Very long content right</td>
    </tr>
    <tr>
        <td>Content two</td>
    </tr>
</table>

As you see, I have some very long content on the right side of the table, actually, it is so long that it does not fit into what height is given by the table rows, and so the table gets higher, and by doing that, the contents one and two are no longer at the top of the table, but distribute themselves along the whole height. How can I stop them from doing this?

EDIT: What I need is not the content to be aligned at the top, but the actual rows themselves.

like image 438
arik Avatar asked Apr 17 '10 18:04

arik


People also ask

How do you align a table on top in HTML?

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.

How do you fix a row at the top of the table?

To freeze the row/column we can use a simple HTML table and CSS. HTML: In HTML we can define the header row by <th> tag or we can use <td> tag also. Below example is using the <th> tag. We also put the table in DIV element to see the horizontal and vertical scrollbar by setting the overflow property of the DIV element.


1 Answers

Interestingly, noone gave the correct answer yet, so I'm jumping in to close this question in a satisfactory way.

What you really need is the valign='baseline' CSS property to align the first text lines of the <td> elements.

td {
  vertical-align: baseline;
}
like image 73
lemzwerg Avatar answered Nov 03 '22 22:11

lemzwerg