CODEWITHSUNDEEP
htmlcsstwitter-bootstraphtml-table
Chicky Egg
Chicky Egg

Reputation: 153

Remove borders from Bootstrap table

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>

enter image description here

Upvotes: 9

Views: 18325

Answers (3)

Buwaneka Sudheera
Buwaneka Sudheera

Reputation: 1417

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.

Upvotes: 25

Naved Khan
Naved Khan

Reputation: 1947

copy and past it on your Style sheet. 

.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border-top: 1px solid rgba(221, 221, 221, 0)!important;

}

.table>thead>tr>th {
vertical-align: bottom;
border-bottom: 2px solid rgba(221, 221, 221, 0)!important;

}

Upvotes: 0

Raru
Raru

Reputation: 381

I think this will works..

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

Upvotes: 4

Related Questions