Remove borders from Bootstrap table

Question

I've been trying to get rid of the lines in between the text. I've tried changing the borders to none, I've also tried text-decoration: none. Both doesn't work. Anyone know how to fix this?

.table {
    font-size: 18px;
    text-align: left;
    text-decoration: none;
}

<table class="table borderless">
  <thead>
    <tr>
      <th>Required and Nonrefundable Fee per Year</th>
    </tr>
  </thead>
    <tbody>
      <tr>
        <td>Registration Fee: per child</td>
        <td>NT$50,000</td>
      </tr>
      <tr>
        <td>Student Accident Insurance Fee: per child</td>
        <td>NT$800</td>
      </tr>
      <tr>
        <td>Parent Association Member Fee: per family</td>
        <td>NT$1,000</td>
      </tr>
  </tbody>
</table>

Solution 1

I copied your code and tried to change and get what you wanted. Finally I was able to get an answer.

tr{
    border-top: hidden;
}

Tell me if this is what you wanted.

Solution 2

I think this will works..

.table>tbody>tr>td,
.table>tbody>tr>th {
  border-top: none;
}