JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<table>
  <thead>
    <tr>
      <td> this icon should be in the center</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><i class="fa fa-minus"></i></td>
    </tr>
  </tbody>
</table>

CSS

table i {
  color: red;
  background: #ffffff;
  border-radius: 20px;
  padding: 5px 0;
  width: 30px;
  margin-right: 5px;
  border: 2px solid black;
  text-align: center;
}