<table id="table" border="1">
 <thead>
    <th>header1</th>
    <th>header2</th>
    <th>header3</th>
  </thead>
 <tbody>
    <tr>
      <td>row1 col1</td>
      <td>row1 col2</td>
      <td>row1 col3</td>
    </tr>
    <tr>
      <td>row2 col1</td>
      <td>row2 col2</td>
      <td>row2 col3</td>
    </tr>
    <tr>
      <td>row3 col1</td>
      <td>row3 col2</td>
      <td>row3 col3</td>
    </tr>
  </tbody>
</table>

#table th {
  cursor: pointer;
  background-color: #dfdfe0;
  font-weight: normal;
  margin-right: 5px;
  padding: 8px 16px;
  text-align: left;
  border:none;
}

#table th:hover {
  background-color: #dfdfe0;
  color: #000000;
  font-weight: bold;
}

#table th.sortasc:not(:last-child):after {
  content: "▲";
  color: #cccccc;
}

#table th.sortdesc:not(:last-child):after {
  content: "▼";
  color: #cccccc;
}