CODEWITHSUNDEEP
csshtml-tablestickyhtml-tbody
TomasB
TomasB

Reputation: 754

tbody border is not flush with table header

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>

Upvotes: 1

Views: 1039

Answers (1)

zer00ne
zer00ne

Reputation: 44043

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>

Upvotes: 1

Related Questions