Vertical alignment and distribution of rows in table

Question

The second column spans 2 rows. I want the first column NOT to be divided by 50% for each row. Row2 should start right under the content of Row1.

<table border="1" style="width:850px">
    <tr>
        <td style="width: 50%; vertical-align: top;">1.Row Cell 1</td>
        <td rowspan="2" style="height:800px">1-2 Row Cell 2</td>
    </tr>
    <tr style="vertical-align:top">
        <td style="vertical-align:top">2.Row Cell 1</td>
    </tr>
</table>

OK, seems that this is related to Internet Explorer 11, but there must be a way to accomplish this!?

To clarify, do you want the height of `1.Row Cell 1` to be only the minimum amount needed to show the content? — 000, Feb 24 '17 at 23:51
Possibly related: http://stackoverflow.com/questions/2611083/css-equivalent-of-table-rowspan-with-fluid-height — 000, Feb 24 '17 at 23:55

score 1 · Answer 1 · answered Feb 24 '17 at 23:54

1

Adding a height: 1em; seemed to work - like this for the first cell:

<td style="width: 50%; vertical-align: top; height: 1em;">

answered Feb 24 '17 at 23:54

Ken H.

408
1
3
11

No, it doesn't for me :( – Barnabeck Feb 25 '17 at 00:01
[This fiddle](https://jsfiddle.net/khaduch/apccbo1s/4/) seems to work? Or did I misinterpret what you are looking for? Which browser are you trying? I tried firefox and chrome - seems to work the same way in both? – Ken H. Feb 25 '17 at 00:16
No it doesn't look the way I want. I'm using Internet Explorer 11 – Barnabeck Feb 25 '17 at 00:25
I checked the fiddle in Opera and it works. Unfortunately I have to use IE11. Why??? What to do... grrrr – Barnabeck Feb 25 '17 at 00:37
unfortunate situation - maybe something other than a table? Although I guess IE11 might be different no matter what. Good luck, and I hope someone might give an answer! – Ken H. Feb 25 '17 at 00:55
Thank you. I already have lost too much time on this. I will have to live with the contents jumping up and down according to the momentary heights of the rows – Barnabeck Feb 25 '17 at 01:06
1

Ken, with Nadim's Help I managed to get this work. Your suggestion was correct, but in IE11 you need to define the height of the last row as well. I tried it in your fiddle and it looks cool. – Barnabeck Feb 25 '17 at 21:11

score 1 · Accepted Answer · answered Feb 25 '17 at 01:37

1

So there is your solution in the snippet below :

table , td, th {
 border: 1px solid #595959;
 border-collapse: collapse;
}
td, th {
 padding: 3px;
 width: 250px;
 height: 150px;
}
th {
 background: #f0e6cc;
}
.even {
 background: #fbf8f0;
}
.odd {
 background: #fefcf9;
}

<table>
 <tbody>
  <tr>
   <td style="height:1em">This is a test thank you for your attention</td>
   <td rowspan="2"></td>
  </tr>
  <tr>
   <td></td>
  </tr>
 </tbody>
</table>

Hope it help.

answered Feb 25 '17 at 01:37

Nadim

280
2
12

Well it works for the snipped you posted, but when I use the code in my case everything gets messed up and I can't adapt the sizes -what is the height: 150px supposed to do? I have GridViews, Formviews and Repeaters in that table. – Barnabeck Feb 25 '17 at 02:49
can you please provide your full html css code to help you. – Nadim Feb 25 '17 at 02:51
the original code is much too long, but if you could just help me to get just my posted example work? The right column has a size of 800px. The total width is 850px and each column has 50%.Would be fantastic if you could help me on that. – Barnabeck Feb 25 '17 at 03:25
So you want to the width of all the table to be 850px , and the two column to be equal to each other ? – Nadim Feb 25 '17 at 03:33
Stop, I got it. Me bad – Barnabeck Feb 25 '17 at 03:34
Ok great ! hope i helped you – Nadim Feb 25 '17 at 03:35

Vertical alignment and distribution of rows in table

2 Answers2