CODEWITHSUNDEEP
htmlcss
Kodek
Kodek

Reputation: 179

td sticky invisible border - how to fix

I have table with sticky <td>'s as header. Table's <tr> and <thead> cant be sticky =(

Issue is while header go sticky, borders became invisible. And it appears as padding.

table{
  border-collapse:collapse;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}
<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
   <tbody>
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
</table>

Upvotes: 0

Views: 119

Answers (2)

zoldxk
zoldxk

Reputation: 1

Ok, I made some researsh and I found this :
border-spacing: 0; *border-collapse: collapse; and it worked.

table{
  border-spacing: 0; *border-collapse: collapse;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}
<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
      <td class="sticky">This is sticky header</td>
    </tr>
   <tbody>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
    <tr><td>Some random text</td></tr>
</table>

Upvotes: 1

Filip Huhta
Filip Huhta

Reputation: 2388

Add border-collapse: separate; to the table instead and it will fix your problem. It will fashion your borders to sit on the <td>, the borders will truly attach to the <td>, and appear collapsed.

Updated: add also border-spacing: 0; to table to not have any padding for the table cells.

table{
  border-collapse: separate;
  border-spacing: 0;
}
td{
border:3px solid gray;
padding:3px;
}

tbody td{
  background:lightgreen;
}
.sticky{
  background:maroon;
  color:white;
  position:sticky;
  top:0;
}
<table>
  <thead>
    <tr>
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
      <td class="sticky">This is sticky header
   <tbody>
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
    <tr><td>Some random text
</table>

Upvotes: 1

Related Questions