بهترین راه برای ریسپانسیو کردن table چیست؟

درود ، دو تا راه دارید :
راه اول استفاده از اسکرول عرضی است . که من خیلی زیاد پیشنهاد نمیکنم استفاده کنید، مگر در موارد خاص !
را دوم که خیلی کارتون رو زیبا میکنه استفاده از کد های زیر هست.

css :

body {
  font-family:Tahoma;
  direction:rtl;
}

table {
  border: 1px solid #ccc;
  margin: 0;
  padding: 0;
  width: 100%;
  font-size:13px;
}

table tr {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
}

table th,
table td {
  text-align: center;
  padding:5px;
}

@media screen and (max-width: 425px) {
  table {
    border: 0;
  }

  table thead{
      display:none;
  }
  
  table tr {
    border-bottom: 3px solid #ddd;
    display: block;
    margin-bottom: .625em;
  }
  
  table td {
    border-bottom: 1px solid #ddd;
    display: block;
    text-align: left;
  }
  
  table td::before {
    content: attr(data-label);
    float: right;
    font-weight: bold;
  }
  
  table td:last-child {
    border-bottom: 0;
  }
}

html:

<table>
  <thead>
    <tr>
      <th>نام</th>
      <th>نام خانوادگی</th>
      <th>کد ملی</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="نام">امیر</td>
      <td data-label="نام خانوادگی">رضایی</td>
      <td data-label="کد ملی">123456</td>
    </tr>
    <tr>
      <td data-label="نام">مسعود</td>
      <td data-label="نام خانوادگی">صادقی</td>
      <td data-label="کد ملی">123456</td>
    </tr>
    <tr>
      <td data-label="نام">سامان</td>
      <td data-label="نام خانوادگی">جعفری</td>
      <td data-label="کد ملی">123456</td>
    </tr>
  </tbody>
</table>