fixed column tables are getting border issue with horizontal scrolling-CodePudding

The border disappears when scrolling. I want the border to appear. How can I do this? Or how can I start the scroll only from the scrolled part?

HTML - Table Structure

  <div >
    <table>
      <thead>
        <th class='fix'>Fixed</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th class='fix'>Fixed</th>
      </thead>
      <tbody>
        <tr>
          <td class='fix'>First Content</td>
          <td>A1</td>
          <td>A2 (with longer content)</td>
          <td>A3</td>
          <td>A4</td>
          <td>A5</td>
          <td class='fix'>Last Content</td>
        </tr>
      </tbody>
    </table>
  </div>

CSS - Table CSS

.wrapper {
  overflow-x:scroll;
  width:100%; 
}
table {
  table-layout: fixed; 
  width: 100%;
  border-collapse: collapse;
  background: white;
}
thead {
  font-family: arial
}
tr {
  border-bottom: 1px solid #ccc;
}
td, th {
  vertical-align: top;
  text-align: left;
  width:100px;
  padding: 5px;
  border: 1px solid red;
}
.fix {
  position:sticky;
  background: white;
}
.fix:first-child {
  left:0;
  width:120px;
}
.fix:last-child {
  right:0;
  width:120px;
}

Play with code: https://jsbin.com/marezen/1/edit?html,css,output

CodePudding user response：

In order to have fixed table borders you need to:

remove border-collapse from css

table {
  table-layout: fixed; 
  width: 100%;
  /*border-collapse: collapse;*/
  background: white;
}

Also add cellspacing="0" to remove the cellspacing

<table cellspacing="0">

for having same borders like your example, combined with my solution:

CSS-

.wrapper {
  overflow-x:scroll;
  width:100%; 
}

table {
  table-layout: fixed; 
  width: 100%;
  /* border-collapse: collapse; */
  background: white;
  border-top:1px solid red;
  /* border-left:1px solid red; */
}

thead {
  font-family: arial
}

tr {
  /* border-bottom: 1px solid #ccc; */
}

td, th {
  vertical-align: top;
  text-align: left;
  width:100px;
  padding: 5px;
  /* border: 1px solid red; */
  border-right:1px solid red;
  border-bottom:1px solid red;
}
.fix {
  position:sticky;
  background: white;
  border-left:1px solid red;
}
.fix:first-child {
  left:0;
  width:120px;
}
.fix:last-child {
  right:0;
  width:120px;
}

td:nth-child(6),
th:nth-child(6){
  border-right:none;
}

HTML-

<div >
    <table cellspacing="0">
      <thead>
        <th class='fix'>Fixed</th>
        <th>Col 1</th>
        <th>Col 2</th>
        <th>Col 3</th>
        <th>Col 4</th>
        <th>Col 5</th>
        <th class='fix'>Fixed</th>
      </thead>
      <tbody>
        <tr>
          <td class='fix'>First Content</td>
          <td>A1</td>
          <td>A2 (with longer content)</td>
          <td>A3</td>
          <td>A4</td>
          <td>A5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content (with longer content)</td>
          <td>B1</td>
          <td>B2</td>
          <td>B3</td>
          <td>B4</td>
          <td>B5</td>
          <td class='fix'>Last Content</td>
        </tr>
        <tr>
          <td class='fix'>First Content</td>
          <td>C1</td>
          <td>C2</td>
          <td>C3</td>
          <td>C4</td>
          <td>C5</td>
          <td class='fix'>Last Content (with longer content)</td>
        </tr>
      </tbody>
    </table>
  </div>

CodePudding user response：

The solution is to add border-left to the wrapper. Then I removed the border property from td, tr and instead added border selection to them like border-top in order to remove the wrapper's border overlapping those borders.

https://jsbin.com/niluyefacu/edit?html,css,output