CODEWITHSUNDEEP
htmlcsshtml-table
Merijndk
Merijndk

Reputation: 1693

Different style for tables HTML

I got a Wordpress template which has a basic style for tables:

table {
    border-collapse:separate;
    border-spacing:0;
    margin-bottom:30px;
    margin-top:30px;
    width:100%;
}

table, td, th {
    vertical-align:middle;
    line-height: 30px;
    border: 2px solid #EDEBE5;
}

th {
    color:#585D63;
    font-family:Helvetica, sans-serif;
    font-size:20px;
    font-weight:normal;
    text-align:center;
    line-height: 50px;
    padding-left: 10px;
    background-color: #EDEBE5;
    font-style:italic;
    box-shadow: 0 0 1px #BBBBBB;
    -moz-box-shadow: 0 0 1px #BBBBBB;
    -webkit-box-shadow: 0 0 1px #BBBBBB;
}

td {
    color:#585D63;
    font-family:Helvetica, sans-serif;
    font-size:14px;
    font-weight:normal;
    text-align:center;
    line-height: 50px;
    padding-left: 10px;
    font-style:italic;
    background: none repeat scroll 0 0 #EDEBE5;
    box-shadow: 0 0 1px #bbbbbb;
    -moz-box-shadow: 0 0 1px #bbbbbb;
    -webkit-box-shadow: 0 0 1px #bbbbbb;
}

Now my customer wants me to create a basic table for contact information. But whenever I create a table it automatically uses the style listed below with the background and border.

Now I gave my table a different class like

<table class="contacttbl">

 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">+31 (0) 000000000000</td>
 </tr>
 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">000000000000</td>
 </tr>
 <tr>
   <td class="contacttd">Telefoon:</td>
   <td class="contacttd">+31 (0) 000000000000</td>
 </tr>

</table>

And style:

.contacttbl{
   width:300px;
   border:0px;
}

.contacttd{
   text-align:left;
   border:0px;
   background-color:#FFFFFF;
}

This all works fine beside one thing. I still get the border while I did border:0px; How can it be that my custom table copies all style rules, but not the border?..

Upvotes: 1

Views: 1020

Answers (3)

Jakub Kotrs
Jakub Kotrs

Reputation: 6211

It's actually not a border but a box-shadow.

.contacttd{
    text-align:left;
    border:0px;
    background-color:#FFFFFF;
    box-shadow: none;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
}

This does the trick.

Upvotes: 2

Robert Byrne
Robert Byrne

Reputation: 560

Try adding border-collapse as follows

.contacttbl{
    width:300px;
    border:0px;
    border-collapse: collapse;
}

Upvotes: 0

Joe Ratzer
Joe Ratzer

Reputation: 18549

On the original CSS td and th have a border, but you haven't added these to the new CSS class called contacttbl. Add td and th with a border of 0px;

For example, to sort out the tds:

.contacttbl td {
border:0px;
}

Upvotes: 0

Related Questions