Blog Detail

  • Home
  • HTML Table fixed header and Column CSS

HTML Table fixed header and Column CSS

In this blog I posted sample CSS code for to make table header and first and last column as fixed.

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>

Write a comment