JSFiddle - React, Tailwind, and code Playground

HTML

<table class="sample">
  <thead>
    <tr>
      <th class="id">編號</th>
      <th class="date">時間</th>
      <th class="item">項目</th>
      <th class="price">金額</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="id">121212</td>
      <td class="date">2018/02/25</td>
      <td class="item">迷客夏</td>
      <td class="price">80元</td>
    </tr>
    <tr>
      <td class="id">232323</td>
      <td class="date">2018/02/28</td>
      <td class="item">鮮茶道</td>
      <td class="price">100元</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th colspan="3">服務費</th>
      <td class="price">0元</td>
    </tr>
    <tr>
      <th colspan="3">總計</th>
      <td class="price">180元</td>
    </tr>
  </tfoot>
</table>

CSS

.sample {
  border-collapse: collapse;
  width: 100%;
}

.sample thead {
  background: #add19e;
}

.sample th, .sample td {
  border: #aaa 1px solid;
  padding: 5px;
  text-align: left;
}

.sample tfoot {
  background: #eee;
}

.sample tfoot th {
  text-align: right;
}

.sample .price {
  text-align: right;
}

@media screen and (max-width: 540px) {
  .sample, .sample tbody, .sample tfoot, .sample tr, .sample th, .sample td {
    display: block;
    border: 0 none;
  }
  .sample thead {
    display: none;
  }
  .sample tbody tr {
    margin-bottom: 20px;
  }
  .sample tbody td {
    position: relative;
    padding-left: 110px;
  }
  .sample tbody td::before {
    content: "zz";
    display: block;
    box-sizing: border-box;
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100%;
    background: #add19e;
    padding: 5px 10px;
    text-align: right;
  }
  .sample tbody .id::before {
    content:"編號";
  }
  .sample tbody .date::before {
    content:"時間";
  }
  .sample tbody .item::before {
    content:"項目";
  }
  .sample tbody .price::before {
    content:"金額";
  }
  .sample .price {
    text-align: left;
  }
  .sample tfoot tr {
    display: flex;
  }
  .sample tfoot th {
    box-sizing: border-box;
    width: 100px;
    background: #ddd;
    padding: 5px 10px;
  }
  .sample tfoot td {
    padding-left: 10px;
  }
}