Geek Answers Handbook

Align table cells with rows

I have an HTML table with a cell that has a row in it. Basically only the cell on the left with rowspan = 2 and 2 columns on the right. I want the columns on the right side to stick to the top. However, the space on the right side is evenly divided between the two columns. Adding height: 100% to the last column on the right side does the trick in Chrome, but does not work in FF or IE.

<table border="1" style="width: 200px;"> <tr> <th>Col1</th> <th>Col2</th> </tr> <tr> <td rowspan="2">Some long cell here...The point is that the Col_A and Col_B should both stick to the top. I tried adding height: 100% to the last column (Col_B) but that does only work in Chrome. Firefox puts Col_B at the very bottom while IE seems to completely ignore it.</td> <td>Col_A</td> </tr> <tr> <td>Col_B</td> </tr> </table>

Fiddle: https://jsfiddle.net/jtr1r132/1/

Update:

As Pragnest suggests below, adding height: 1px to the first column on the right (Col_A) does the trick for Chrome and FF. However, in IE (and Edge), it still does not work as intended.

Updated script: https://jsfiddle.net/jtr1r132/9

+6
source share
1 answer

In your case, you need a little alternative to achieve your result. As below, you need to remove the height in the second column and set the height to 1 px in the first column in order to automatically achieve your result.

How to change html according to below -

  <table border="1" style="width: 200px;"> <tr> <th>Col1</th> <th>Col2</th> </tr> <tr> <td rowspan="2">Some long cell here...The point is that the Col_A and Col_B should both stick to the top. I tried adding height: 100% to the last column (Col_B) but that does only work in Chrome. Firefox puts Col_B at the very bottom while IE seems to completely ignore it.</td> <td style="height: 1px">Col_A</td> </tr> <tr> <td >Col_B</td> </tr> </table>
+2
source

More articles:


All Articles