Различного стиль для таблиц HTML

Я получил WordPress шаблона, который имеет базовый стиль для таблиц:Различного стиль для таблиц HTML

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; 
}

Теперь мой клиент хочет меня создать простейшую таблицу для получения контактной информации. Но всякий раз, когда я создаю таблицу, он автоматически использует стиль, указанный ниже, с фоном и границей.

Теперь я дал мой стол другой класс как

<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>

и стиль:

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

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

Это все работает отлично рядом с одной вещи. Я все еще получаю границу в то время как я сделал border:0px; Как это может быть, что мои пользовательские таблицы копируют все правила стиля, но не на границе? ..

источник

2013-09-10 Merijn dk

Хороший процесс для определения этого материала - это «осмотреть элемент» с помощью встроенных инструментов разработчика и снять флажки со связанными стилями, пока не найдете те, которые вы вызываете стиль, который вы пытаетесь изменить. –

Это на самом деле не является границей, а в box-shadow.

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

Это трюк.

источник

2013-09-10 14:37:34

Да, это трюк! большое спасибо! –

На оригинальной CSS td и th имеют границ, но вы еще не добавили это к новому классу CSS, называемому contacttbl. Добавить td и th с границей 0px;

Например, чтобы разобраться в td сек:

.contacttbl td { 
border:0px; 
}

источник

2013-09-10 14:35:36

Я добавил td .contacttd. Я не делал этого. но я не использую это в своем столе. поэтому он не должен использоваться правильно? –

На самом деле это была пограничная тень. очень глупо от меня. спасибо, что помогли мне в любом случае! –

Попробуйте добавить border-collapse следующим

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

источник

2013-09-10 14:36:00

Я пробовал, но ничего не делает. что он должен делать? –

На самом деле это была тень окна. спасибо за помощь! –

@Merijndk Я думаю, что неправильно понял ваш вопрос, я думал, что вы хотите устранить границы –

Различного стиль для таблиц HTML

ответ

Смежные вопросы