How to freeze first two columns and border in html table?-CodePudding

I want freeze first two columns and its border in html table. I went through multiple post in stackoverflow. I am able to freeze the columns but border is keep moving. how to freeze table border?

also header border also keep moving. Is there any way to freeze the borders along with columns in HTML, CSS?

Thanks in advance...

.view {
    margin: auto;
    width: 600px;
  }
  
  .wrapper {
    position: relative;
    overflow: auto;
    border: 1px solid black;
    white-space: nowrap;
  }
  
  .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: white;
  }
  
  .first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 0px;
  }
  
  .second-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 100px;
  }

  table, th, td {
     border: 1px solid black;
      border-collapse: collapse;
  }

<div >
    <div >
      <table >
        <thead>
          <tr>
            <th >Number</th>
            <th >First Name</th>
            <th>Last Name</th>
            <th>Employer</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td >1</td>
            <td >Mark</td>
            <td>Ham</td>
            <td>Micro</td>
          </tr>
          <tr>
            <td >2</td>
            <td >Jacob</td>
            <td>Smith</td>
            <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
          </tr>
          <tr>
            <td >3</td>
            <td >Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>

CodePudding user response：

You have to modify a little your CSS part:

.view {
    margin: auto;
    width: 600px;
  }
  
  .wrapper {
    position: relative;
    overflow: auto;
    border: 1px solid black;
    white-space: nowrap;
  }
  
  .sticky-col {
    position: -webkit-sticky;
    position: sticky;
    background-color: white;
  }
  
  .first-col {
    width: 100px;
    min-width: 100px;
    max-width: 100px;
    left: 0px;
  }
  
  .second-col {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    left: 104px; /* you have to count the first-col width => your border width */
  }

/* separate table part and td, th part */
  td, th {
     border: 1px solid black;
  }
  table {
     border-collapse: separate;
     border-spacing: 0;
  }

<div >
    <div >
      <table >
        <thead>
          <tr>
            <th >Number</th>
            <th >First Name</th>
            <th>Last Name</th>
            <th>Employer</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td >1</td>
            <td >Mark</td>
            <td>Ham</td>
            <td>Micro</td>
          </tr>
          <tr>
            <td >2</td>
            <td >Jacob</td>
            <td>Smith</td>
            <td>Adob Adob Adob AdobAdob Adob Adob Adob Adob</td>
          </tr>
          <tr>
            <td >3</td>
            <td >Larry</td>
            <td>Wen</td>
            <td>Goog Goog Goog GoogGoog Goog Goog Goog Goog Goog</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>