CODEWITHSUNDEEP
htmlcss
Equalsk
Equalsk

Reputation: 8214

Table with rowspan, <td> heights incorrect in Safari (7.1.2), fine in FF/IE/Chrome

I've got a basic HTML table that uses rowspan.

CSS 

html, body{
    height: 100%;
    width: 100%;
}
table, tr, td{
    border:1px solid #f00;
    border-collapse: collapse;
}

HTML

<table>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>image</td>
    <td>text</td>
</tr>
<tr>
    <td>top image</td>
    <td rowspan="2">text<br />text<br />text<br />text<br />text<br />text</td>
</tr>
<tr>
    <td>bottom image</td>
</tr>

JS Fiddle http://jsfiddle.net/38ro2p39/1/

In Firefox (36), Chrome (40) and IE10 it looks like I'd expect that the "Top Image" and "Bottom Image" cells are of even size.

In Safari (5.1.7 for Windows) the "Top Image" cell is the height of it's content, and "Bottom Image" fills the rest of the space.

I don't want to specify any sizes for rows/columns as the content changes size and needs to stretch.

Any ideas why this happens, or how I can get around it? Thanks!

PS. I'm up for alternatives to tables. I did look at using <div> with table-layout but it lacks rowspan.

EDIT

Thanks to Pete for pointing out Safari for Windows is ancient. A friend using Safari 7.1.2 for Mac OSX confirms the issue still occurs in that version.

Upvotes: 1

Views: 1326

Answers (1)

Rick Hitchcock
Rick Hitchcock

Reputation: 35670

According to the spec:

CSS 2.1 does not specify how cells that span more than one row affect row height calculations except that the sum of the row heights involved must be great enough to encompass the cell spanning the rows.

I can't find a CSS method of fixing this, but I've come up with a JavaScript method, which works for your code:

var td= document.querySelectorAll('tr td[rowspan="2"]');

for(var i = 0 ; i < td.length ; i++) {
  if(Math.abs(td[i].offsetHeight/2 - td[i].parentNode.children[0].offsetHeight) > 1) {
    td[i].parentNode.children[0].style.height = td[i].offsetHeight/2 + 'px';
  }
}

Basically, it gets all tds having a rowspan, and it sets the other td in their row to be half their height.

Working Fiddle

Upvotes: 1

Related Questions