CODEWITHSUNDEEP
csshtml-tableborder
AlanRubinoff
AlanRubinoff

Reputation: 385

Remove white border between <th> in table

I have this table

JsFiddle

I would like to set the th like this but can't do it.

enter image description here

Taking the oportunity to ask, if anyone knows how to set the striped rows is welcome to answer.

   <table>
  <thead>
    <tr>
      <th>Name</th>
      <th>ID</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Jim</td>
      <td>00001</td>
      <td>Blue</td>
    </tr>
    <tr>
      <td>Sue</td>
      <td>00002</td>
      <td>Red</td>
    </tr>
    <tr>
      <td>Barb</td>
      <td>00003</td>
      <td>Green</td>
    </tr>
  </tbody>
</table>

td{
  border: 1px solid #999;
  padding: 0.5rem;
}
th
{

background-color:#5e6196;
}

Upvotes: 1

Views: 2983

Answers (2)

Mackan
Mackan

Reputation: 6271

To get rid of cellspacing using css:

table {
   border-spacing: 0;
   border-collapse: collapse;
}

and to get those stripes:

tbody tr:nth-child(odd) {
   background-color: #ccc;
}

Fiddle

Upvotes: 2

Rahul Tripathi
Rahul Tripathi

Reputation: 172458

You may try like this

<table cellspacing="0" cellpadding="0">

JSFIDDLE DEMO

OR you can add this in your CSS

table { border-collapse:collapse }

JSFIDDLE DEMO

Upvotes: 0

Related Questions