JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="wrap">
<table class="data-table">
  <thead>
    <tr>
      <th>제목</th>
      <th>수량</th>
      <th>가격</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="data-title" data-title="제목">익사이팅 손난로 핫팩 5개입익사이팅 손난로 핫팩 5개입</td>
      <td class="data-bom" data-title="수량">4</td>
      <td class="data-price" data-title="가격">19,000원</td>
    </tr>
    <tr class="data-tax">
      <td colspan="3">
        <ul>
          <li>
            <span class="data-stitle">부가세액</span>
            <span class="data-sprice">19,000원</span>
          </li>
          <li>
            <span class="data-stitle">면세</span>
            <span class="data-sprice">8,000원</span>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <td class="data-title" data-title="제목">익사이팅 손난로 핫팩 5개입익사이팅 손난로 핫팩 5개입</td>
      <td class="data-bom" data-title="수량">8</td>
      <td class="data-price" data-title="가격">19,000원</td>
    </tr>
    <tr class="data-tax">
      <td colspan="3">
        <ul>
          <li>
            <span class="data-stitle">부가세액</span>
            <span class="data-sprice">19,000원</span>
          </li>
          <li>
            <span class="data-stitle">면세</span>
            <span class="data-sprice">8,000원</span>
          </li>
        </ul>
      </td>
    </tr>
  </tbody>
   <tbody>
    <tr>
      <td class="data-title" data-title="제목">익사이팅 손난로 핫팩 5개 입익사이팅 손난로 핫팩 5개입 입익사이팅 손난로 핫팩 5개입</td>
      <td class="data-bom" data-title="수량">1</td>
      <td class="data-price" data-title="가격">19,000원</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="2">충주문금액</td>
      <td>19,000원</td>
    </tr>
  </tfoot>
</table>
</div>

CSS

* {
  box-sizing: border-box;
}
.wrap {
  margin: 15px;
}
.data-table,
.data-table tbody,
.data-table tfoot,
.data-table tr,
.data-table .data-tax td {
  width: 100%;
  display: block;
  float: none;
}
.data-table thead tr {
  
}
.data-table tbody {
  border-bottom: 1px dashed #000000;
}
.data-table tbody:nth-of-type(odd) {
  background-color: #eeeeee;
}
.data-table tbody tr {
  display: block;
  overflow: hidden;
 }
.data-table tbody tr td {
  display: block;
  float: left;
  position: relative;
  padding: 5px 5px 3px 40px;
}
.data-table tbody tr td.data-title {
  padding-left: 0;
  font-weight: bold;
  display: block;
  float: none;
  
}
.data-table tbody tr > td:before {
  content: attr(data-title);
  position: absolute;
  top: 5px;
  left: 5px;
}
.data-table tbody tr td.data-title:before {
  content: none;
}
.data-table .data-tax td {
  padding-right: 10px;
  padding-left: 0;
  
}
.data-table .data-tax ul {
  padding-left: 20px;
}
.data-table .data-tax li {
  
}
.data-table .data-tax li:before {
  content: '';
  display: table;
  clear: both;
}
.data-table .data-tax li .data-stitle {
  float: left;
}
.data-table .data-tax li .data-sprice {
  float: right;
}

.data-table tfoot tr {
  border-top: 1px dashed #000000;
  margin-top: 1px;
}