Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 910
Chicky Egg Avatar asked Jul 13 '17 05:07

Chicky Egg


People also ask

How do I remove a border in bootstrap?

Bootstrap By Building Projects - Includes Bootstrap 4 Use the border-top-0 class to remove the top border from an element.

How do you remove border lines from a table?

Remove all borders to select the table and show the Table Design tab. On the Table Design tab, click the arrow next to Borders and then click No Border .

How do you remove TR lines from a table?

Delete a row or column Select a row or column that you want to delete. Press Backspace, or select the Table Tools Layout tab >Delete, and then select an option.


2 Answers

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.

like image 162
Buwaneka Sudheera Avatar answered Oct 11 '22 14:10

Buwaneka Sudheera


I think this will works..

.table>tbody>tr>td,
.table>tbody>tr>th {
  border-top: none;
}
like image 27
Raru Avatar answered Oct 11 '22 14:10

Raru