Отзывчивый пользовательский стол

Question

Я буду создавать таблицу для своего сайта. К сожалению, однако, я не могу сделать его на 100% отзывчивым, так как, если я вставлю его в контейнер (отзывчивый контейнер), он не всегда идеально подходит. Также я не могу установить "margin: 20px 0px;" для каждой ячейки таблицы (теперь, если вы вставляете несколько разделов, дублируя код, который я там разместил, все строки присоединяются). Может ли кто-нибудь помочь мне решить эти две проблемы? К сожалению, я не могу улучшить свой код.

table {
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0px;
  padding: 0px;
  max-width: 100%;
}

tr {
  display: table-row;
  vertical-align: inherit;
  border-color: inherit;
}

td {
  display: table-cell;
}

.achievementImage {
  height: 64px;
  width: 64px;
  padding: 0px 0px;
  vertical-align: top;
}

.achievementTitle {
  padding-left: 10px;
  background-color: #DA3037;
  height: 25px;
  font-size: 14px;
  color: white;
}

.achievementDescription {
  padding-left: 10px;
  background-color: #F7F9FC;
}

.achievementTitle .achievementDescription {
  min-width: 50px;
  padding: 0px 5px;
}

.achievementGuide {
  display: block;
  margin: 0;
  padding: 15px 10px 10px 10px;
  background-color: #EBEDF0;
}

<table width="100%" cellpadding="0" cellspacing="0" id="achievementsTable">
  <tbody>
    <tr>
      <td rowspan="2" class="achievementImage">
        <img src="https://...">
      </td>
      <td height="25" class="achievementTitle">
        <b>Text</b>
      </td>
    </tr>
    <tr>
      <td height="40" class="achievementDescription">
        Text
      </td>
    </tr>
    <tr>
      <td colspan="4">
        <p style="text-align: justify;" class="achievementGuide">
          Text
        </p>
      </td>
    </tr>
  </tbody>
</table>