Geek Answers Handbook

Does Colspan span 2.5 columns?

I have a table with 5 columns. The last line should be two cells located at the same distance.

Ideally, I would like to use <td colspan="2.5"> - what is an elegant way to do this?

The table has a border of 1, so use

 <td colspan=2">abc</td> <td></td> <td colspan=2">def</td>

looks ugly

+7
source share
3 answers

Do you really need two table cells in the bottom row, or only two blocks that are half the width of the entire row? If the latter, you can do <td colspan="5"> for the last line, put two <div> , put one to the left and the other to the right and give them width:50% :

 <table> <tbody> <tr> <td>1111</td> <td>2222</td> <td>3333</td> <td>4444</td> <td>5555</td> </tr> <tr> <td colspan="5"> <div class="first-half"> half </div> <div class="second-half"> half </div> </td> </tr> </tbody> </table>

And some CSS:

 .first-half { float: left; width: 50%; } .second-half { float: right; width: 50%; }

And the usual jsfiddle: http://jsfiddle.net/ambiguous/mmZEa/

If you want them to be table cells, you could double the number of horizontal cells, make all existing <td colspan="2"> , and then use <td colspan="5" width="50%"> for two cells in the bottom line: http://jsfiddle.net/ambiguous/JzrLK/

+13
source

Try something like this

 <table border="1"> <tr> <td>text</td> <td>text</td> <td colspan="2">text</td> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> <td colspan="2">text</td> <td>text</td> <td>text</td> </tr> <tr> <td>text</td> <td>text</td> <td colspan="2">text</td> <td>text</td> <td>text</td> </tr> <tr> <td colspan="3">text</td> <td colspan="3">text</td> </tr> </table>

Worked well on Chrome, FireFox, and IE 7-9.

See the script: https://jsfiddle.net/weyy601z/

+14
source

This seems to work well (tested in chrome, ie and firefox):

 <table border="0" CELLPADDING="0" CELLSPACING="0"> <tr> <td> <table border="1" width="100%"> <tr> <td>abcsss</td> <td>sdf</td> <td>def</td> <td>def</td> <td>defsssss</td> </tr> </table> <td> </tr> <tr> <td> <table border="1" width="100%"> <tr> <td width="50%">test</td> <td width="50%">test</td> </tr> </table> </td> </tr> </table>
+2
source

More articles:


All Articles