i trying create table in html (new it).
there heading , subheading in between, border misaligned, when create table within table.
also, border of ticket-status cell should match 3 cell (pending, cancelled, total), border not aligning accordingly.
you can check following check code more clarification , fiddle immediate look , feel of border.
could please how can resolve this.
following code:
<div> <table border="1" style="width: 100%;"> <colgroup> <col width="30%"> <col width="30%"> <col width="20%"> <col width="20%"> </colgroup> <thead> <tr> <th scope="col"></th> <th scope="col">ticket status</th> <th scope="col">quota people</th> <th scope="col">quota people</th> </tr> </thead> <tbody> <tr></tr> </tbody> </table> <table border="1" style="width: 100%;"> <colgroup> <col width="25%"> <col width="5%"> <col width="10%"> <col width="10%"> <col width="10%"> <col width="10%"> <col width="10%"> <col width="10%"> <col width="10%"> </colgroup> <thead> <tr> <th scope="col">unit name</th> <th scope="col">id</th> <th scope="col">pending</th> <th scope="col">cancelled</th> <th scope="col">total</th> <th scope="col">sports</th> <th scope="col">vip</th> <th scope="col">sports</th> <th scope="col">vip</th> </tr> </thead> <tbody> <tr> <td>finland railways</td> <td>210</td> <td>39</td> <td>21</td> <td>14</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table> fiddle: https://jsfiddle.net/hjkoflmp/
simply add border-collapse:
table{ border-collapse:collapse; } the border-collapse css property determines whether table's borders separated or collapsed. in separated model, adjacent cells each have own distinct borders. in collapsed model, adjacent table cells share borders.
demo fiddle
by extension, can simplify markup use single table 2 header rows, , colspan instead of colgroup
table { border-collapse: collapse; }<table border="1" style="width: 100%;"> <thead> <tr> <th scope="col" colspan="2">ticket status</th> <th scope="col" colspan="3">quota people</th> <th scope="col" colspan="4">quota people</th> </tr> <tr> <th scope="col">unit name</th> <th scope="col">id</th> <th scope="col">pending</th> <th scope="col">cancelled</th> <th scope="col">total</th> <th scope="col">sports</th> <th scope="col">vip</th> <th scope="col">sports</th> <th scope="col">vip</th> </tr> </thead> <tbody> <tr> <td>finland railways</td> <td>210</td> <td>39</td> <td>21</td> <td>14</td> <td>0</td> <td>0</td> <td>0</td> <td>0</td> </tr> </tbody> </table>
Comments
Post a Comment