Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 "> Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 "> Are Cool col 3 is right-aligned $1600 col 2 is centered $12 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 zebra stripes are neat $1 tiger stripes are neat $1 tiger stripes are neat $1 "> 
// HTML

<table>
<thead>
<tr>
<th>Tables</th>
<th align="center">Are</th>
<th align="right">Cool</th>
</tr>
</thead>
<tbody>
<tr>
<td>col 3 is</td>
<td align="center">right-aligned</td>
<td align="right">$1600</td>
</tr>
<tr>
<td>col 2 is</td>
<td align="center">centered</td>
<td align="right">$12</td>
</tr>
<tr>
<td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
<tr>
<td>tiger stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
 <tr>
<td>tiger stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
 <td>zebra stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
<tr>
<td>tiger stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
 <tr>
<td>tiger stripes</td>
<td align="center">are neat</td>
<td align="right">$1</td>
</tr>
</tbody>
</table>

// CSS

table {
  --global-title-color: black;
  --global-background-color: lightblue;
  --global-content-background-color: white;
  --global-border-color: black;
  
  --global-border-radius: 25px;
  --global-border-width-1: 1px;
  --global-space-fixed-2: 10px;
  --global-space-fixed-3: 15px;
  
  color: var(--global-title-color);
  background-color: var(--global-content-background-color);
  border-collapse: separate;
  border-color: var(--global-title-color);
  border-style: solid;
  border-radius: var(--global-border-radius);
  border-width: 0 var(--global-border-width-1) var(--global-border-width-1)
    var(--global-border-width-1);
  border-spacing: 0;
  width: 100%;

  thead {
    position: sticky;
    top: 0;
    z-index: 10;

    th {
      color: var(--global-background-color);
      background-color: var(--global-title-color);
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: bottom;
    }

    th:first-child {
      border-top-left-radius: var(--global-border-radius);
    }

    th:last-child {
      border-top-right-radius: var(--global-border-radius);
    }
  }

  tbody {
    td {
      border-top: var(--global-border-width-1) solid var(--global-border-color);
      padding: var(--global-space-fixed-2) var(--global-space-fixed-3);
      vertical-align: top;
    }

    tr:nth-child(2n) {
      background-color: var(--global-background-color);
    }

    tr:last-child {
      td:first-child {
        border-bottom-left-radius: var(--global-border-radius);
      }

      td:last-child {
        border-bottom-right-radius: var(--global-border-radius);
      }
    }
  }
}