CODEWITHSUNDEEP
htmlcssxhtml
kidwon
kidwon

Reputation: 4524

table border-merge problem

I'm having this table, with CSS :

*{margin:0; padding:0;}

table {
    font-size:0.75em;
    margin:300px auto;              
    font-family:'Lucida Grande',sans-serif;
    border-collapse:collapse;
}

thead th a {
    color:#fff;
    width:127px;
    height:15px;          
    display:block;
    padding:5px 7px;
    text-align:left;
    font-weight:normal;
    text-decoration:none;          
    background:url('files/images/but.png')  no-repeat;
}


td{
    font-size:1em;
    padding:6px 7px;
    border-left:1px solid black;
    border-right:1px solid #9b9b8b;
}

.contrast{background-color:#ececd8;}

And the HTML :

<table>
    <thead >
    <tr>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    <th><a href="#">cell</a></th>
    </tr>
</thead>
<tbody>
   <tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr class="contrast">
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr>
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
   <tr class="contrast">
       <td>cell</td>
       <td>cell</td>
       <td>cell</td>
       <td><input type="checkbox" /></td>
   </tr>
</tbody>
</table>

However my...

td {
    border-left:1px solid black;
    border-right:1px solid #9b9b8b;
}

...does not apply to my wish and only one of the borders is visible maybe because of the border-collapse:collapse and I can apply some helpful rules also because the cells are inline. I would appreciate any solution thank you.

BR, Stephan

Upvotes: 1

Views: 4847

Answers (2)

kidwon
kidwon

Reputation: 4524

10x it was helpful to find something new but that's not the solution to my problem. I've fixed it my self and the key is not using border-collapse:collapse; but border-spacing: 0 0; Wish u all the best and I give u a vote up for your kind cooperation

Upvotes: 2

Teneff
Teneff

Reputation: 32158

very common solution is to simulate borders with background color like this:

css:

<style type="text/css">
  table {
    background: red;
    border: 1px solid red;
  }
  table td, table th {
    background: white;
  }
</style>

html:

<table cellpadding="0" cellspacing="1">
  <tr>
    <td> .... </td>
  </tr>
</table>

Upvotes: 1

Related Questions