html table with fixed header and fixed column

In this blog, I have posted sample HTML and CSS code to add a table with fixed header and fixed first and last column. You no need to add any single line of java script or jQuery to make the your HTMl table header and column as fixed. You can do it through CSS only.

CSS

td input{
    width: 100%;
    border: none;
}

table {
    font-family: "Fraunces", serif;
    white-space: nowrap;
    margin: 0;
    border: none;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border: 1px solid #ccc;
  }
  table td,
  table th {
    border: 1px solid #ccc;
    padding: 0.5rem 1rem;
  }
  table thead th {
    padding: 3px;
    position: sticky;
    top: 0;
    z-index: 1;
    width: 25vw;
    background: white;
  }
  table td {
    background: #fff;
    padding: 0px;
    text-align: center;
  }
  
  table tbody th {
    font-weight: 100;
    font-style: italic;
    text-align: left;
    position: relative;
  }

  table thead th:first-child, table tbody tr td:first-child{
    position: sticky;
    left: 0;
    z-index: 2;
  }
  table thead th:last-child, table tbody tr td:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
  }

  table tbody th {
    position: sticky;
    left: 0;
    background: white;
    z-index: 1;
  }
  caption {
    text-align: left;
    padding: 0.25rem;
    position: sticky;
    left: 0;
  }
  
  [role="region"][aria-labelledby][tabindex] {
    width: 100%;
    max-height: 98vh;
    overflow: auto;
  }
  [role="region"][aria-labelledby][tabindex]:focus {
    outline: 0;
  }

HTML

<h1>Daily Job</h1>
<div class="content">
    <form #dailyJobForm="ngForm">
       
        <div class="table-responsive">
            <table>
                <thead>
                    <!-- <th style="width: 5%;">SNo</th> -->
                    <th style="width: 10%;">Employee</th>
                    <th>Job1/Rs.10</th>
                    <th>Job2/Rs.10</th>
                    <th>Job3/Rs.10</th>
                    <th>Job4/Rs.10</th>
                    <th>Job5/Rs.10</th>
                    <th>Job6/Rs.10</th>
                    <th>Job7/Rs.10</th>
                    <th>Job8/Rs.10</th>
                    <th>Job9/Rs.10</th>
                    <th>Job10/Rs.10</th>
                    <th>Job11/Rs.10</th>
                    <th>Job12/Rs.10</th>
                    <th>Job13/Rs.10</th>
                    <th>Job14/Rs.10</th>
                    <th>Job15/Rs.10</th>
                    <th>Job16/Rs.10</th>
                    <th style="width: 10%;">Total</th>
                </thead>
                <tbody>
                    <tr>
                        <!-- <td>1</td> -->
                        <td>XXXXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>100000</td>
                    </tr>
                    <tr>
                        <!-- <td>2</td> -->
                        <td>XXXXXXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <!-- <td>1</td> -->
                        <td>XXXXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <!-- <td>1</td> -->
                        <td>XXXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>100000</td>
                    </tr>
                    <tr>
                        <!-- <td>2</td> -->
                        <td>XXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>1000</td>
                    </tr>
                    <tr>
                        <!-- <td>1</td> -->
                        <td>XXXXXXXX</td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td><input type="number" min="0" max="1000"></td>
                        <td>1000</td>
                    </tr>
                </tbody>
            </table>
        </div>


    </form>
</div>