How to remove the row that separates the columns in an html table?

Asked

Viewed 1,255 times

2

I would like to know how I can remove the row separating the columns from this table.

table {
    font-family: url('../fonts/Lato-Regular.ttf');
    border-collapse: collapse;   
    border-radius: 4px;
    width: 500px;
}
td, th {
    border: 1px solid #CACFD2;
    text-align: left;
    padding: 8px;
}
<table>
   <tr>
      <th>Loja</th>
      <th>Faturamento</th>
   </tr>
   <tr>
      <td>Loja 01</td>
      <td>R$ 21.362,17</td>
   </tr>
   <tr>
      <td>Loja 02</td>
      <td>R$ 11.238,21</td>
   </tr>
   <tr>
      <td>Loja 03</td>
      <td>R$ 19.598,95</td>
   </tr>
   <tr>
      <td>Loja 04</td>
      <td>R$ 35.625,12</td>
   </tr>
   <tr>
      <td>Loja 05</td>
      <td>R$ 10.854,74</td>
   </tr>
</table>

1 answer

3


One of the ways to do it would be like this, I put the transparent color on the right edge of all the first ones td

table {
    font-family: url('../fonts/Lato-Regular.ttf');
    border-collapse: collapse;   
    border-radius: 4px;
    width: 500px;
}
td, th {
    border: 1px solid #CACFD2;
    text-align: left;
    padding: 8px;
}
td:first-of-type {
    border-right-color: transparent;
}
    <table>
       <tr>
          <th>Loja</th>
          <th>Faturamento</th>
       </tr>
       <tr>
          <td>Loja 01</td>
          <td>R$ 21.362,17</td>
       </tr>
       <tr>
          <td>Loja 02</td>
          <td>R$ 11.238,21</td>
       </tr>
       <tr>
          <td>Loja 03</td>
          <td>R$ 19.598,95</td>
       </tr>
       <tr>
          <td>Loja 04</td>
          <td>R$ 35.625,12</td>
       </tr>
       <tr>
          <td>Loja 05</td>
          <td>R$ 10.854,74</td>
       </tr>
    </table>

  • Thanks Hugo, that’s right, man.

  • 1

    @Leandrade quiet young, may be editing another way, I used this pq if I take the line will be 1px misaligned understand

Browser other questions tagged

You are not signed in. Login or sign up in order to post.