画面幅が狭くなると、スクロールバーが出現し、一番左端の項目は固定になるテーブルのcssです。

<div class="table-typeResponsive">
 <table>
  <tr>
   <th>表タイトル</th>
   <th>表タイトル</th>
   <th>表タイトル</th>
   <th>表タイトル</th>
   <th>表タイトル</th>
  </tr>
  <tr>
   <th>表タイトル</th>
   <td>テキストテキストテキスト</td>
   <td>テキストテキスト</td>
   <td>テキスト</td>
   <td>テキストテキストテキストテキスト</td>
  </tr>
  <tr>
   <th>表タイトル　テキスト</th>
   <td>テキスト</td>
   <td>テキストテキスト</td>
   <td>テキスト</td>
   <td>テキストテキスト</td>
  </tr>
  <tr>
   <th>表タイトル</th>
   <td>テキストテキストテキストテキスト</td>
   <td>テキストテキストテキスト</td>
   <td>テキストテキスト</td>
   <td>テキスト</td>
  </tr>
  <tr>
   <th>表タイトル　テキスト</th>
   <td>テキストテキスト</td>
   <td>テキストテキストテキストテキスト</td>
   <td>テキストテキストテキストテキスト</td>
   <td>テキスト</td>
  </tr>
  <tr>
   <th>表タイトル　テキスト</th>
   <td>テキストテキスト</td>
   <td>テキストテキストテキストテキスト</td>
   <td>テキストテキストテキストテキスト</td>
   <td>テキスト</td>
  </tr>
 </table>
<!-- /.table-typeResponsive --></div>

.table-typeResponsive{
  width:100%;
  display: block;
  overflow-x: auto;
  margin-bottom:2.5em;
  table{
    width:auto;
    white-space:nowrap;
    border-top:#DDD solid 1px;
    border-right:#DDD solid 1px;
    margin-bottom:0;
    tr{
      th,td {
        width:auto;
        min-width:auto;
        display:table-cell;
        font-size:1.1em;
        padding: 0.5em 0.5em;
        background:#FFF;
        border-top:#DDD solid 1px;
        border-right:#DDD solid 1px;
        &:nth-child(1){
          position: sticky;
          left: 0;
          z-index:1;
          &::before{
            width: 100%;
            height: 100%;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            border-right: #DDD solid 1px;
            box-shadow: 0.3em 0 0.3em rgba(0, 0, 0, 0.1);
          }
        }
      }
      th{
        text-align:center;
      }
    }
  }
}