Menu
I have the following table:
<table border="1"> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col">Header</th> </tr> <tr> <th scope="row"> </th> <td> </td> <td>Split this one into two columns</td> </tr> </table> And I wish to split the cell which contains "Split this one into two columns" into two cells/columns. How do I go about this?
Fiddle
958
Use an extra column in the header, and use <colspan> in your header to stretch a cell for two or more columns. Insert a <table> with 2 columns inside the td you want extra columns in.
Tables can be divided into three portions − a header, a body, and a foot. The head and foot are rather similar to headers and footers in a word-processed document that remain the same for every page, while the body is the main content holder of the table. <thead> − to create a separate table header.
in column one, has a single row. in column two, is split into 2 sub rows. in column three, is split into 4 sub rows (row one from the previous column is split into 2 sub rows, and row 2 from the previous column is split into 2 sub rows).
Like this http://jsfiddle.net/8ha9e/1/
Add colspan="2" to the 3rd <th> and then have 4 <td>'s in your second row.
<table border="1"> <tr> <th scope="col">Header</th> <th scope="col">Header</th> <th scope="col" colspan="2">Header</th> </tr> <tr> <th scope="row"> </th> <td> </td> <!-- The following two cells will appear under the same header --> <td>Col 1</td> <td>Col 2</td> </tr> </table> I came here for a similar problem I was facing with my table headers.
@MrMisterMan's answer, as well as others, were really helpful, but the borders were beating my game. So, I did some research to find the use rowspan.
Here's what I did and I guess it might help others facing something similar.
<table style="width: 100%; margin-top: 10px; font-size: 0.8em;" border="1px"> <tr align="center" > <th style="padding:2.5px; width: 10%;" rowspan="2">Item No</th> <th style="padding:2.5px; width: 55%;" rowspan="2">DESCRIPTION</th> <th style="padding:2.5px;" rowspan="2">Quantity</th> <th style="padding:2.5px;" colspan="2">Rate per Item</th> <th style="padding:2.5px;" colspan="2">AMOUNT</th> </tr> <tr> <th>Rs.</th> <th>P.</th> <th>Rs.</th> <th>P.</th> </tr> </table>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
