JSFiddle - React, Tailwind, and code Playground

by jpeter06

HTML

<table>
<thead>
  <tr>
    <th>title 1</th>
    <th>title 2</th>
    <th>title 3</th>
    <th>title 4</th>
    <th>title 5</th>
    <th></th>
  </tr>
</thead>
<tbody>
  <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
    <td>content 5</td>
    <td></td>
  </tr>
    <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
    <td>content 5</td>
    <td></td>
  </tr>
    <tr>
    <td>content 1</td>
    <td>content 2</td>
    <td>content 3</td>
    <td>content 4</td>
    <td>content 5</td>
    <td></td>
  </tr>
</tbody>
</table>

CSS

table{
  min-width:100%;
  border-collapse: collapse;
}

 td,  th {
  border: 1px solid #ddd;
  padding: 8px;
}

tr:nth-child(even){background-color: #f2f2f2;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #04AA6D;
  color: white;
}

td, th{
  white-space: nowrap;
}

td:last-child, th:last-child {
  width: 100%;
  padding:0px;
}