table表のレスポンシブ方法とCSSデザインテクニック

<table class="sample1">
    <tbody>
        <tr>
            <th>会社名</th>
            <td>株式会社〇〇〇</td>
        </tr>
        <tr>
            <th>所在地</th>
            <td>〇〇県〇〇市〇〇町 〇丁目〇番〇号</td>
        </tr>
        <tr>
            <th>電話番号</th>
            <td>00-0000-0000</td>
        </tr>
        <tr>
            <th>事業内容</th>
            <td>〇〇事業<br>〇〇事業<br>〇〇事業</td>
        </tr>
    </tbody>
</table>

.sample1 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%; /* table幅を100%に指定 */
    background: #fff;
    border: none;
}
.sample1 th,
.sample1 td {
    display: block; /* セルをブロック要素に指定 */
    width: 100%; /* セルを親要素いっぱいの幅に指定 */
    border: none;
    font-size: 14px;   
    padding: 10px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
}
.sample1 th {
    font-weight: 700;
    color: #fff;
    background: #14116e; /* thの背景色 */
}

@media screen and (min-width: 768px) {
    .sample1 th,
    .sample1 td {
        display: table-cell; /* デフォルト値に指定 */
        border-bottom: 1px solid #ccc;
        color: #000;
        background: #fff;
    }
    .sample1 th {
        color: #000;
        background: #fff; /* thの背景色 */
    }
    .sample1 tr th:first-child {
        width: 100px; /* thの固定幅 */
    }
}

<table class="sample2">
    <thead>
        <tr>
            <th>本日のランチ</th>
            <th>期間限定メニュー</th>　<!-- 別の場所に表示したいth -->
            <th>特別価格</th>　<!-- 別の場所に表示したいth -->
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>ランチA</th>
            <td data-label="期間限定メニュー">スパイシーチキンカレー<br>グリーンサラダ<br>ライスまたはチーズナン</td>
            <td data-label="特別価格">800円</td>
        </tr>
        <tr>
            <th>ランチB</th>
            <td data-label="期間限定メニュー">エビバターマサラ<br>グリーンサラダ<br>ライスまたはチーズナン</td>
            <td data-label="特別価格">1,000円</td>
        </tr>
    </tbody>
</table>

.sample2 {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
    background: #fff;
    border: none;
}
.sample2 th,
.sample2 td {
    font-size: 14px;
    background: #fff;
    border: 1px solid #ccc;
    padding: 8px;
    vertical-align: middle;
    box-sizing: border-box;
}
.sample2 th {
    font-weight: 700;
    text-align: center;
}
.sample2 thead th {
    color: #fff;
    background: #14116e;
}
.sample2 tbody td:last-child {
  text-align: right;
}
.sample2 thead th:first-child,
.sample2 thead th:last-child {
  width: 20%;
}
@media screen and (max-width: 768px) {
  .sample2 thead {
    display:none;
  }
  .sample2 tr {
    background-color: unset;
  }
  .sample2 th, .ex_sample2 td {
    display: block;
    width: 100%;
    border: 0;
    border-bottom: 1px solid #ccc;
  }
  .sample2 tbody th{
    background: #14116e;
    color:#fff;
    text-align: center;
  }
  .sample2 tbody tr td:not(:last-child) {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }
  .sample2 tbody tr td:not(:last-child)::before{
    content: attr(data-label);
    width: fit-content;
    padding: 0.2em 1em;
    border-radius: 100vw;
    font-size: 12px;
    background: #eee;
  }
  .sample2 tbody td:last-child::before{
    content: attr(data-label);
    display: inline-block;
    margin-right: 10px;
  }
  .sample2 tbody td:last-child{
    display: flex;
    justify-content: space-between;
  }
}

<div class="table_wrap"> <!-- tableの親要素 -->
<span class="table_arrow"></span> <!-- スクロールを伝える矢印 -->
<table class="sample3">
    <thead>
        <tr>
            <th></th>
            <th>プランA</th>
            <th>プランB</th>
            <th>プランC</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>料金</th>
            <td>無料</td>
            <td>1,500円</td>
            <td>3,000円</td>
        </tr>
        <tr>
            <th>サポート</th>
            <td>対象外</td>
            <td>1回 / 月</td>
            <td>無制限</td>
        </tr>
        <tr>
            <th>プラン変更</th>
            <td>不可</td>
            <td>可能</td>
            <td>可能</td>
        </tr>
        <tr>
            <th>長期契約割引</th>
            <td>×</td>
            <td>〇</td>
            <td>〇</td>
        </tr>
    </tbody>
</table>
</div>

.table_wrap {
    overflow-x : auto; /* 横スクロール */
}

.sample3 {
    width: 100%;
    min-width: 600px; /* 幅が600px以下になったらスクロール */
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 2px 0;
    white-space: nowrap; /* 折り返し禁止 */    
}
.sample3 th,
.sample3 td {
    font-size: 14px;
    border: none;
    padding: 8px;
    background: #e8e6f3;
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
}
.sample3 td {
    font-size: 15px;
}
.sample3 tr:nth-child(even) th,
.sample3 tr:nth-child(even) td {
  background: #eaf6fe;
}
.sample3 thead th {
    border-radius: 6px 6px 0 0;
    color: #fff;
}
.sample3 thead th:nth-child(1) {
    background: #eaf6fe;
    background-color: transparent;
    color: #000;
}
.sample3 thead th:nth-child(2) {
    background: #14116e;
}
.sample3 thead th:nth-child(3) {
    background: #b50165;
}
.sample3 thead th:nth-child(4) {
    background: #6f9b12;
}
.sample3 tbody tr:first-child th{
    border-radius: 6px 6px 0 0;
}
.sample3 tbody tr:last-child th,
.sample3 tbody tr:last-child td{
    border-radius: 0 0 6px 6px;
}
.sample3 thead th:nth-child(3)  {
  border-top:solid 4px #b50165;
  border-left:solid 4px #b50165;
  border-right:solid 4px #b50165;
}
.sample3 tbody td:nth-child(3)  {
  border-left:solid 4px #b50165;
  border-right:solid 4px #b50165;
}
.sample3 tbody tr:last-child td:nth-child(3){
    border-bottom:solid 3px #b50165;
}
@media screen and (max-width: 480px) {
.table_wrap {
    position: relative;
}

/* 幅が480px以下になったら矢印を表示 */
.table_wrap::before {
    content: 'スクロール';
    font-size: 12px;
    color: #ccc;
    position: absolute;
    top: 0;
    left: 5px;
}
.table_arrow {
    display: block;
    position: relative;
}
.table_arrow::before {
    content: '';
    position: absolute;
    top:20px;
    left:5px;   
    width: 100px;
    height: 1px;
    background:#ccc;  
}
.table_arrow::after {
    content: '';
    position: absolute;
    top:15px;
    left:90px;   
    width: 15px;
    height:1px;
    background:#ccc;
    transform: rotate(35deg);
}
}