Why doesn't this table look neat?
I want the base cells to be 20 pixels per side. Then I want the "merged cells" (with rowspan or colspan> 1) to have a size corresponding to the number of base cells that they cover.
To do this, I manually set the width of these merged cells. But in some configurations, it behaves strangely, as in the figure above.
the blue square covers 2x2 cells and is the right size. But the green square (and all the rest are large) is 5x2 and should be as large as its neighbor, 108px.
Why does chrome throw away the dimensions that I click? (not tested by other browsers)
here you will find jsFiddle: http://jsfiddle.net/kjshk/
HTML is as follows:
<table> <tbody> <tr> <td ></td> <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td> </tr> <tr> <td colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td> <td ></td> <td ></td> </tr> <tr> <td ></td> <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td> <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td> </tr> <tr> <td ></td> </tr> <tr> <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td> <td colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td> </tr> </tbody> </table> edit : I updated jsFiddle with how it should look, but with an extra line that forces the correct dimensions http://jsfiddle.net/kjshk/11/
edit² . I cannot change the HTML structure because it is generated dynamically (there is a script that actually merges the cells). So I can act in style.
If you change the percentage: does it help?
<table <tbody> <tr> <td ></td> <td colspan="9" rowspan="1" style="width: 90%; height: 20px; "></td> </tr> <tr> <td colspan="8" rowspan="1" style="width: 80%; height: 20px; "></td> <td ></td> <td ></td> </tr> <tr> <td ></td> <td colspan="7" rowspan="2" style="width: 70%; height: 42px; "></td> <td colspan="2" rowspan="2" style="width: 20%; height: 42px; background-color:blue "></td> </tr> <tr> <td ></td> </tr> <tr> <td colspan="5" rowspan="2" style="width: 50%; height: 42px; "></td> <td colspan="5" rowspan="2" style="width: 50%; height: 42px; background-color:green "></td> </tr> <tr></tr> </tbody> </table> how it should look: <table> <tbody> <tr> <td ></td> <td colspan="9" rowspan="1" style="width: 196px; height: 20px; "></td> </tr> <tr> <td colspan="8" rowspan="1" style="width: 174px; height: 20px; "></td> <td ></td> <td ></td> </tr> <tr> <td ></td> <td colspan="7" rowspan="2" style="width: 152px; height: 42px; "></td> <td colspan="2" rowspan="2" style="width: 42px; height: 42px; background-color:blue "></td> </tr> <tr> <td ></td> </tr> <tr> <td colspan="5" rowspan="2" style="width: 108px; height: 42px; "></td> <td colspan="5" rowspan="2" style="width: 108px; height: 42px; background-color:green "></td> </tr> <tr></tr> <tr> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> <td ></td> </tr> </tbody> </table> The widths in the table cells are always interpreted as recommendations instead of rules. table-layout:fixed applies the rules.
<table style="table-layout:fixed;"> <colgroup> <col style="width: 20px" span="10" /> </colgroup> <tbody> ... </tbody> </table>