CODEWITHSUNDEEP
htmlcsshtml-tableborder
José Barbosa
José Barbosa

Reputation: 903

html+css tables - border-bottom of tr overlaps border-right of td/th

Here is a sample of my current code: jsfiddle

The problem is, the dark gray line between the table header and body is getting cut by the margin-right of the cells. I want to have a that border between columns and a non-breaked margin between header and body table.

Here is the HTML:

<table id="prazo">
  <thead>
    <tr>
      <th>month</th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th> val </th>
      <th>val</th>
    </tr>
  </thead>
  <tbody>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
    <tr class="srow">
      <td>January</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
      <td>$100</td>
    </tr>
  </tbody>
</table>

and the css:

#prazo {
    font-family: 'Bitter', serif;
    width: 100%;
    border-spacing:0;
    border-collapse:collapse;
}

#prazo thead tr{
    height: 50px;
    background-color: #ffffff;
    font-weight:bold;
    border-bottom: 3px solid #7d7d7d !important;
}



#prazo td, th {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 14px;
    height: 30px;
    background-color: #ffffff;
    border-right: 3px solid #f6f6f6;
}

.srow td {
    background-color: #f2f2f2 !important;
}

#prazo th {
    font-size: 16px;
}

Upvotes: 4

Views: 2687

Answers (5)

Jos&#233; Barbosa
Jos&#233; Barbosa

Reputation: 903

For those who are curious here is a good approach.

I used Martin solution :)

Upvotes: 0

Parixit
Parixit

Reputation: 3855

You only need to give bottom border to each header cell.

Please add following style:


#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
}

Please check here for demo

Upvotes: 0

Martin
Martin

Reputation: 1226

The best I can come up with is to either: increase the width of the darker border to 4px (border-right: 4px solid #7d7d7d;)
or
reduce the width of the other border to 2px (border-right: 2px solid #f6f6f6;).

See this jsFiddle

Not the best of answers, but it does give you a solid dark border and keep the lighter one between the th cells.

Upvotes: 1

OGHaza
OGHaza

Reputation: 4795

How about changing your final style to:

#prazo th {
    font-size: 16px;
    border-bottom: 3px solid #7d7d7d !important;
    border-right:0 !important;
}

and removing the bottom border higher up

Upvotes: 0

Pawan Lakhara
Pawan Lakhara

Reputation: 1150

#prazo td, th {
    background-color: #FFFFFF;
    border-right: 3px solid #F6F6F6;
    font-size: 14px;
    height: 30px;
    padding-left: 10px;
    padding-right: 10px;
}

remove following line from above css

border-right: 3px solid #F6F6F6;

Upvotes: 0

Related Questions