Sticky Row/Col

by Anov Siradj

HTML

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-success">
  <form data-toggle="validator" role="form" id="selectMilestone">
    <div class="container-fluid">
      <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
        <div class="table-wrapper">
          <table class="border">
            <colgroup>
              <col span="1" style="background-color: #ffffff" />
              <col span="36" style="background-color: #bdd7ee" />
              <col span="36" style="background-color: #c6e0b4" />
              <col span="48" style="background-color: #f8cbad" />
            </colgroup>

            <thead>
              <tr rowspan="100">
                <h3 class="form-line-heading">
                  YPR Award Bulk Update - Milestones
                </h3>
              </tr>
              <tr class="first">
                <th rowspan="3" class="sticky-col">Name</th>
                <th colspan="36">
                  M1 - 24 participates (6 from each Challenge Area); 2 Assists
                  (from two different Challenge Areas); 1 Lead
                </th>
                <th colspan="36">
                  M2 - 20 participates (5 from each Challenge Area); 3 Assists
                  (from two different Challenge Areas); 2 Leads
                </th>
                <th colspan="48">
                  M2 - 20 participates (5 from each Challenge Area); 3 Assists
                  (from two different Challenge Areas); 2 Leads
                </th>
              </tr>

              <tr class="second">
                <!-- M1 -->
                <th colspan="8">Personal Growth</th>
                <th colspan="8">Community</th>
                <th colspan="8">Creative</th>
                <th colspan="8">Outdoor</th>
                <th rowspan="2">Personal Reflection</th>
                <th rowspan="2">Promise &amp; Law</th>
                <th rowspan="2">Completed</th>
                <th...

CSS

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.table-wrapper{
    margin: 0 auto;
    display: block;
    width: 98vw;
    height: 95vh;
    overflow: auto;
    border: 1px solid black;
  }

td {
  text-align: center;
  vertical-align: middle;
}

tbody > tr > td:first-child {
  background: #fff;
  position: sticky;
  left: 0px;
  width: min-content;
  padding: 2px 5px 5px 5px;
}

table,
th,
td {
  border: 1px solid black;
  padding-left: 10px;
  padding-right: 10px;
  height: 40px;
}

thead {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

table thead tr.first th {
  padding: 3px;
  background: white;
}

table thead tr.second th {
  padding: 3px;
  position: -webkit-sticky;
  background: white;
}

table thead tr.third th {
  padding: 3px;
  position: -webkit-sticky;
  background: white;
}

.sticky-col {
  position: -webkit-sticky;
  position: sticky;
  left: 0;
  background: white;
  z-index: 2;
}