定義リストを使った画像付きのレスポンシブテーブルを作りたい #テスト

HTML

test.php


<dl class="responsive-image-table">
<dt>一つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>二つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>四つ目</dt>
<dd>画像が無い場合。こちらにはコンテンツが入ります。</dd>
<dt>五つ目</dt>
<dd class="with-img">
<div class="text-section">こちらにはコンテンツが入ります。</div>
<div class="img-section">
<img src="img/img-640x480.gif" alt="image">
</div>
</dd>
<dt>六つ目</dt>
<dd>画像が無い場合。こちらにはコンテンツが入ります。</dd>
</dl>


<table class="table">
  <tr>
    <td class="table-img">
      <div class="box">
        <div class="box-img">
          <img src="https://homepagenopro.com/wp-content/uploads/2017/11/sample.png" alt="">
        </div>
        <div class="box-text">
          テキスト
        </div>
      </div>
    </td>
    <td class="table-txt">
      テキスト<br>
      テキスト<br>
      テキスト
    </td>
  </tr>
</table>


<table class="table01">
<tbody>
<tr>
<th>見出し1</th>
<td class="table01-img">画像1</td>
<td>文章1</td>
</tr>
<tr>
<th>見出し2</th>
<td class="table01-img">画像2</td>
<td>文章2</td>
</tr>
<tr>
<th>見出し3</th>
<td class="table01-img">画像3</td>
<td>文章3</td>
</tr>
<tr>
<th>見出し4</th>
<td class="table01-img">画像4</td>
<td>文章4</td>
</tr>
</tbody>
</table>

SCSS

_test.scss


/*---------------------------------------------
  General Settings
  ---------------------------------------------*/
$sm-size: 480px;
$tablet-size: 768px;

img {
  width: 100%;
  vertical-align: bottom;
}

/*---------------------------------------------
  Responsive Image Table
  ---------------------------------------------*/
$border-common: 1px solid rgba(#c9c9c9, 1);

.responsive-image-table {
  border-right: $border-common;
  border-bottom: $border-common;
  @media (min-width: $tablet-size) {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }
  dt,
  dd {
    box-sizing: border-box;
    border-top: $border-common;
    border-left: $border-common;
    padding: 10px 1em;
  }
  dt {
    background: rgba(#eeeeee, 1);
    @media (min-width: $tablet-size) {
      width: 20%;
    }
  }
  dd {
    margin: 0;
    @media (min-width: $sm-size) {
      &.with-img {
        display: -ms-flexbox;
        display: flex;
      }
    }
    @media (min-width: $tablet-size) {
      width: 80%;
    }
  }
  .img-section {
    padding: 1em 0;
    @media (min-width: $sm-size) {
      padding: 0 1em;
    }
  }
}








.table{
  border-collapse: collapse;
  margin: 0 auto;
}
.table-img,
.table-txt{
  vertical-align: top;
  width: 300px;
}
.table-img{
  background: #fffacd;
}
.table-txt{
  background: #d2b48c;
}
.box-img,
.box-text{
  display: inline-block;
  vertical-align: middle;
}
.box-img > img{
  width: 60px;
}




/* 画像付きテーブル
-------------------------------------*/

table.table01 {
 width:100%;　/* テーブルの横幅 */
 border:#000 solid 2px;　/* テーブル全体の罫線 */
}
table.table01 tbody th {
 background:#000;　/* 見出しの背景色 */
 color:#fff;　/* 見出しの文字色 */
 padding:10px 10px;　/* 見出しの上下・左右の余白 */
 border:#000 solid 1px;　/* 見出しの罫線 */
 vertical-align:center;　/* 見出しの縦位置（中央寄せ） */
}
table.table01 tbody td.table01-img img{
 width:100%;　/* 画像の横幅値 */
 height:100%;　/* 画像の縦幅値 */
 display:block;
}
table.table01 tbody td.table01-img{
 padding:0px;　/* 画像自体の余白（なし） */
}
table.table01 tbody td {
 background:#fff;　/* 文章セルの背景色 */
 border:#000 solid 1px;　/* 文章セルの罫線 */
 padding:10px 15px;　/* 文章セルの上下・左右の余白 */
 vertical-align:top;　/* 文章セルの縦位置（中央寄せ） */
}

/* テーブルのレスポンシブデザイン */

@media screen and (max-width: 780px) {
table.table01 tbody th {
 display:block;　/* ブロック要素にしてセルの幅を100％にする */
 padding:5px;
}
table.table01 tbody td.table01-img{
 padding:0px;
}
table.table01 tbody td {
 display:block;
}
}


table.table01 tbody td.table01-img img{
 width:100%;　/* 画像の横幅値 */
 height:100%;　/* 画像の縦幅値 */
 display:block;
}
table.table01 tbody td.table01-img{
 padding:0px;　/* 画像自体の余白（なし） */
}
table.table01 img{
 display: block;　/* 画像とセルの余白をなくす */
}

test.js