CODEWITHSUNDEEP
css
nanquim
nanquim

Reputation: 1924

thead background color without border

How can I color the entire thead row without these borders?

<thead bgcolor="#d6f5d6">
        <tr className="ha">
          <th>Evento</th>
          <th>Valor</th>
        </tr>
</thead>


table thead tr,
table thead tr th{
    background: #d6f5d6;
    border: 1px solid #d6f5d6;
    background-clip: content-box;
}

table thead tr th{
    border: none;
    background-clip: content-box;
}

enter image description here

Upvotes: 0

Views: 608

Answers (1)

morganney
morganney

Reputation: 13630

You want the border-spacing property.

table {
  border-spacing: 0;
}
table thead tr,
table thead tr th{
    background: #d6f5d6;
    border: 1px solid #d6f5d6;
    background-clip: content-box;
}

table thead tr th{
    border: none;
    background-clip: content-box;
}
<table>
  <thead bgcolor="#d6f5d6">
    <tr className="ha">
      <th>Evento</th>
      <th>Valor</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>one</td>
      <td>two</td>
    </tr>
    <tr>
      <td>three</td>
      <td>four</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions