How do I remove the row separating the columns in an html table?

Question

How do I remove the row separating the columns in an html table?

Navigation

#1 by (3 votes)

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>

html5 css3 tabela

asked by anonymous 29.07.2018 / 03:40

1 answer

Update tables using trigger, from a main table Pass ViewBag to _Layout

score 3 · Accepted Answer

One of the ways to do this would be to put the transparent color on the right edge of all first 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>