How to remove border of a cell with html and css?

user_14529779 0
Viewed 48

table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
}
.border-none{
    border:none;
}
<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

I've the table looks like this:

enter image description here

But how could I remove the first cell in the last row:

enter image description here

Also I've tried:

style='border:none;'

and

style='border-left:none;border-bottom:none;border-top:none'

But without any change, any help is much appreciated!

border css html
3 Answers

You could target the 'last of type' tr and 'first of type' td in the table footer.

You can see that I had to remove the border from the table element also, as this surrounded the whole table

table{
    border-collapse: collapse;
    border: none;
}
th,td{
    padding: 5px;
}
.border-none{
    border:none;
}

tfoot tr:last-of-type td:first-of-type {
  border: none;
}
<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

user_39901560

You can adjust you css to:

.border-none{
    border-color: transparent;
    border-right: 1px solid black;
}


table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
}
.border-none{
    border-color: transparent;
    border-right: 1px solid black;
}
<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

user_10999890 

table{
    border-collapse: collapse;
}
th,td{
    padding: 5px;
    border: none;
}
.border-none{
    border:none;
}
<table border="1">
  <thead>
    <tr>
      <th>Id</th>
      <th>Title</th>
      <th>Price</th>
      <th>Qte</th>
    </tr>
  </thead>
  <tbody>
  <tr>
      <td>1</td>
      <td>Pc</td>
      <td>1440</td>
      <td>2</td>
  </tr>
  <tr>
      <td>2</td>
      <td>Phone</td>
      <td>1300</td>
      <td>3</td>
  </tr>
  </tbody>
  <tfoot>
    <tr>
      <th class="border-none"></th>
      <th>Total</th>
      <th>100</th>
      <th>5</th>
    </tr>
  </tfoot>
</table>

user_190150840
Related