JSFiddle - React, Tailwind, and code Playground

by Fu-Ching Hsiao

HTML

<h1>客戶基本資料</h1>
<table>
  <tr>
    <td>客戶代瑪</td>
    <td>
      <input type="text">
    </td>
  </tr>

  <tr>
    <td>全名</td>
    <td>
      <input type="text">
    </td>
    <td>簡稱</td>
    <td>
      <input type="text">
    </td>
  </tr>
  <tr>
    <td>電話</td>
    <td>
      <input type="text">
    </td>
    <td>分機</td>
    <td>
      <input type="text">
    </td>
    <td>手機</td>
    <td>
      <input type="text">
    </td>
  </tr>

  <tr>
    <td>地址</td>
    <td>
      <input type="text">
    </td>
    <td>郵件地址</td>
    <td>
      <input type="text">
    </td>
  </tr>

  <tr>
    <td>負責人</td>
    <td>
      <input type="text">
    </td>
    <td>聯絡人</td>
    <td>
      <input type="text">
    </td>
  </tr>

  <tr>
    <td>銀行帳號</td>
    <td>
      <input type="text">
    </td>
    <td></td>
  </tr>
</table>
<table class="zui-table zui-table-highlight-all">
  <thead>
    <tr>
      <th>領櫃場</th>
      <th>交櫃場</th>
      <th>單價</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>新竹</td>
      <td>基隆</td>
      <td>3,000</td>

    </tr>
    <tr>
      <td>楊梅</td>
      <td>基隆</td>
      <td>5,000</td>

    </tr>
    <tr>
      <td>高雄</td>
      <td>基隆</td>
      <td>1,000</td>
    </tr>
  </tbody>
</table>

CSS

.zui-table {
  border: solid 1px #DDEEEE;
  border-collapse: collapse;
  border-spacing: 0;
  font: normal 13px Arial, sans-serif;
}

.zui-table thead th {
  background-color: #DDEFEF;
  border: solid 1px #DDEEEE;
  color: #336B6B;
  padding: 10px;
  text-align: left;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table tbody td {
  border: solid 1px #DDEEEE;
  color: #333;
  padding: 10px;
  text-shadow: 1px 1px 1px #fff;
}

.zui-table-highlight-all {
  overflow: hidden;
  z-index: 1;
}

.zui-table-highlight-all tbody td,
.zui-table-highlight-all thead th {
  position: relative;
}

.zui-table-highlight-all tbody td:hover::before {
  background-color: #CCE7E7;
  content: '\00a0';
  height: 100%;
  left: -5000px;
  position: absolute;
  top: 0;
  width: 10000px;
  z-index: -1;
}

.zui-table-highlight-all tbody td:hover::after {
  background-color: #CCE7E7;
  content: '\00a0';
  height: 10000px;
  left: 0;
  position: absolute;
  top: -5000px;
  width: 100%;
  z-index: -1;
}


.zui-table {
    border: solid 1px #DDEEEE;
    border-collapse: collapse;
    border-spacing: 0;
    font: normal 13px Arial, sans-serif;
}
.zui-table thead th {
    background-color: #DDEFEF;
    border: solid 1px #DDEEEE;
    color: #336B6B;
    padding: 10px;
    text-align: left;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table tbody td {
    border: solid 1px #DDEEEE;
    color: #333;
    padding: 10px;
    text-shadow: 1px 1px 1px #fff;
}
.zui-table-horizontal tbody td {
    border-left: none;
    border-right: none;
}
@media (max-width: 991px) {
    .zui-table-responsive, .zui-table-responsive thead, .zui-table-responsive thead tr, .zui-table-responsive thead th, .zui-table-responsive tbody, .zui-table-responsive tbody tr, .zui-table-responsive tbody td {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 100%;
    }
    .zui-table-responsive {
        border-color: #BBDFDF;
    }
   ...