tbody border is not flush with table header

Question

I am having trouble making tbody border not extending over the width of thead. Is there a way to fix it? Thanks

PS: There are other problems like the empty ".cell" div not sizing properly, however I'm not sure if you can post multi-issue questions. So let's focus on the issue above.

table { 
  box-sizing: border-box;
  border-collapse: collapse;
  margin-bottom: 2000px;
}

th {
  background-color: white;
  position: sticky;
  top: 0;
  padding: 0;
  border: 0;
}

.cell {
  box-sizing: border-box;
  display: inline-block;
  height: 100%;
  width: 100%;
  padding: 15px;
  background-color: red;
}

th:first-of-type > .cell {
  border-radius: 5px 0 0 0;
}

th:last-of-type > .cell {
  border-radius: 0 5px 0 0;
}

td {
  border: 1px solid blue;
  background-color: #fff;
  padding: 15px;
}

tbody {
  border: 2px solid green;
  box-sizing: border-box;
}

<table>
<thead>
  <tr>
    <th><div class="cell"></div></th>
    <th><div class="cell">aaaaaa</div></th>
    <th><div class="cell">aaaa</div></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>aaaaaa</td>
    <td>aaaa</td>
  </tr>
</tbody>
</table>

`padding: 15px` on `` should be applied to `` as well. padding on any cell is like a margin. If you apply padding to content (such as `.cell`) the results are not uniform. — zer00ne, Jan 25 '20 at 10:30
I need to cover the whole with the .cell div to make the round corners and use the original to mask out the underlying table, which is peaking through the gaps made by the round corners. — TomasB, Jan 25 '20 at 13:30

score 1 · Answer 1 · edited Jun 20 '20 at 09:12

I'm assuming the rounded corners are the reason why you are placing <div> within the <th>. If you want rounded corners then you need to use the following styles:

table { border-collapse:separate; border-spacing:0; border: 0; }

The demo has some additional changes that can be adjusted.

Demo

table {
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2000px;
  border: 0;
}

thead {
  position: sticky;
  top: 0;  
}

th {
  border: 1px solid red;
  background-color: red;
  padding:15px;
}

th:first-of-type {
  border-top-left-radius: 6px;
}

th:last-of-type {
  border-top-right-radius: 6px;
}

td {
  border: 1px solid blue;
  background-color: #fff;
  padding: 15px;
}

<table>
  <thead>
    <tr>
      <th></th>
      <th>aaaaaa</th>
      <th>aaaa</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>aaaaaa</td>
      <td>aaaa</td>
    </tr>
  </tbody>
</table>

The round corners are done with the div because I need to hide the underlying table (peaking through the roundness when scrolling) with th white background. But this was not what I had problem with. The problem was that the tbody border is reaching outside the width of the thead. — TomasB, Jan 25 '20 at 13:28
Have you actually reviewed my demo yet? From what I've seen with Chrome and Firefox PC is that your example fails in both aspects while mine fails at the first problem (border is barely perceptible) — zer00ne, Jan 25 '20 at 15:53

tbody border is not flush with table header

1 Answers1

Demo