CODEWITHSUNDEEP
htmlcsshtml-tableborder
give_me_one
give_me_one

Reputation: 25

How to display borders in thead with border-collapse?

I would like to collapse only the out-side border, not inside of the thead:

table, tr {
            border: 1px solid black;
            padding: 7px;
            border-collapse: collapse;
}

th {
            background: #ccccff;
        }
<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
            </tr>
        </thead>
 </table>

will not show the borders between the th like Data 1 | Data 2, why? (And how to add these the border between the th elements)?

Upvotes: 2

Views: 2354

Answers (2)

FluffyKitten
FluffyKitten

Reputation: 14312

border-collapse doesn't have the effect you think. It just prevents gaps between the borders of each cell. This is what happens without border-collapse:

table {
  border: 1px solid black;
  padding: 7px;
  border-collapse: none;
}

th,td {
  border: 1px solid blue;
}
<table>
  <thead>
    <tr>
      <th>Data 1</th>
      <th>Data 2</th>
    </tr>
  </thead>
</table>

The other problem is that you are adding the border to the tr - this is just the row, it doesn't apply to the cells inside the row. Also FYI, adding a border to the table in CSS only adds the border around the outside of the whole table.

To apply borders to the cells, you need to add the border CSS to the th elements (and td for the rest of your table), e.g.:

th, td {
  border: 1px solid blue;
}

Working Snippet with examples of just rows with borders and th/tds with borders:

table,
tr {
  border: 1px solid black;
  padding: 7px;
  border-collapse: collapse;
  text-align:center;
}

th {
  border: 1px solid blue;
}

tr.showborder td {
  border: 1px solid red;
}
<table>
  <thead>
    <tr>
      <th>Data 1</th>
      <th>Data 2</th>
      <th>Data 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>this ROW</td>
      <td> has a</td>
      <td>border</td>
    </tr>
    <tr>
      <td>this ROW</td>
      <td> also has a</td>
      <td>border</td>
    </tr>
    <tr class="showborder">
      <td>The cells in </td>
      <td>this row all</td>
      <td>have borders</td>
    </tr>
    <tr class="showborder">
      <td>The cells in </td>
      <td>this row all</td>
      <td>have borders</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

s.kuznetsov
s.kuznetsov

Reputation: 15213

Remove border: 1px solid black from table, tr. And set the border for the right side border-right: 1px solid black. Also, using the :last-of-type pseudo-class, remove the border for the last element.

table, tr {
            /*border: 1px solid black;*/
            padding: 7px;
            border-collapse: collapse;
}

th {
            background: #ccccff;
            border-right: 1px solid black;
        }
        
th:last-of-type {
            border-right: unset;
        }
<table>
        <thead>
            <tr>
                <th>Data 1</th>
                <th>Data 2</th>
                <th>Data 3</th>
                <th>Data 4</th>
                <th>Data 5</th>
                <th>Data 6</th>
                <th>Data 7</th>
                <th>Data 8</th>
                <th>Data 9</th>
                <th>Data 10</th>
            </tr>
        </thead>
 </table>

Upvotes: 1

Related Questions