CODEWITHSUNDEEP
htmlcss
fatherazrael
fatherazrael

Reputation: 5987

How to adjust table within table to have single border?

I am trying to create a table in HTML (new to it).

There is a heading and subheading in between, but its border get misaligned, when i create table within table.

also, border of ticket-status cell should match with three cell (Pending, Cancelled, Total), but border is not aligning accordingly.

You can check following check code for more clarification and also fiddle for immediate look into the look and feel of border.

Could anyone please help how can i resolve this.

Following is 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/

Upvotes: 3

Views: 3765

Answers (1)

SW4
SW4

Reputation: 71160

Simply add border-collapse:

table {
  border-collapse: collapse;
}

The border-collapse CSS property determines whether a table's borders are separated or collapsed. In the separated model, adjacent cells each have their own distinct borders. In the collapsed model, adjacent table cells share borders.

Demo Fiddle

By extension, you can simplify your markup to use a single table with two header rows, and 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>

Upvotes: 6

Related Questions