JSFiddle - React, Tailwind, and code Playground

by 규연 황

HTML

<div class="container">dd</div>

<div class="table-container">
  <table class="table">
    <tbody>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
  </tbody>
  </table>
</div>

<div class="table-container">
  <table class="table02" rules="all">
    <tbody>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
    <tr>
      <td>001</td>
      <td>001</td>
      <td>001</td>
    </tr>
  </tbody>
  </table>
</div>

SCSS

body {
  padding: 40px;
}
.container {
  margin-bottom: 1px;
  background: #333;
}

.table-container {
  overflow-y: visible;
  overflow-x: clip;
  margin: 30px 0;
}

table.table {
  width: calc(100% + 2px);
  margin-left: -1px;
  border-collapse: collapse;
  clip-path: inset(0 1px);
  
  /* box-shadow: 0 2px 3px 0 rgba(0,0,0,1); */
  td {
    border: 1px solid #000000;  
    padding: 20px;
    background: #eeeeee;
  }
}

table.table02 {
  width: 100%;
  border-collapse: collapse;
  border-top: 1px solid #000000; 
  border-bottom: 1px solid #000000; 
  /* box-shadow: 0 2px 3px 0 rgba(0,0,0,1); */
  td {
    border: 1px solid #000000;  
    padding: 20px;
    background: #eeeeee;
  }
}