Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>a proper example to ensure it is not showing correctly in webkit is the following:</p> <pre><code>&lt;table width="200" border="1"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td rowspan="2" width="15"&gt; this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height &lt;/td&gt; &lt;td&gt; this should be big instead &lt;/td&gt; &lt;/tr&gt; &lt;tr height="20"&gt; &lt;td height="20"&gt; this row fails to size to 20 height on webkit &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; </code></pre> <p>as you can see the left part is rendered fine, but the right part should be different, as in the top row should populate the left over space and the bottom row is set to 20 height (as you can see neither the tr height nor the td height is taken into consideration by webkit). this renders fine in all other browsers</p> <p>EDIT: after playing around and tinkering about my problem, I came to the below solution. completely relying on jquery reading the height attribute property from the row you want to change:</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $("#pipnorowspan").height(function(){ return $("#rcarowspan").height() - $("#piplowerrow").attr('height') + 2; }); }); &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;table width="200" style="border-collapse:collapse; border:1px solid #000;" id="ertable"&gt; &lt;tbody&gt; &lt;tr style="border:1px solid #000;"&gt; &lt;td rowspan="3" width="15" id="rcarowspan" style="border:1px solid #000;"&gt; this is a very high rowspan 2 row that will thus be split over 2 rows, it prevents the second row from being formatted in height &lt;/td&gt; &lt;td id="pipnorowspan" style="border:1px solid #000;"&gt; this should be big instead &lt;/td&gt; &lt;/tr&gt; &lt;tr height="20" id="piplowerrow" style="border:1px solid #000;"&gt; &lt;td height="20" style="border:1px solid #000;"&gt; this row fails to size to 20 height on webkit &lt;/td&gt; &lt;/tr&gt; &lt;/tbody&gt; &lt;/table&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload