Border для th в thead

Тыр-тыр

Не получается в файле css передать border для th (который в thead). А напрямую в html получается, но так не хочется.Border должен быть здесь:
< th colspan="2">Карточка № 1</th>
Если напрямую делаю, то отображается:
<th style="border-bottom: 2px solid #bebebe" colspan="2">Карточка № 1</th>
- но так небогоугодно и просто некошерно.Куда вставляю:
.cases-table thead th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #bebebe;
    text-align: center;
    color: #000000;
    font-weight: 700;
}
Полный код:
.cases-table {
    -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    -moz-box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    background-color: #ffffff;
    margin-bottom: 29px;
    border: none;
    padding: 20px 18px;
    border-collapse: separate;
    width: 100%;
    font-size: 0.923em;
}
.cases-table thead th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #bebebe;
    text-align: center;
    color: #000000;
    font-weight: 700;
}
.cases-table th {
    text-align: left;
    padding: 7px 0 7px 1px;
    border-bottom: 1px solid #dbdbdb;
    color: #797979;
    font-weight: 300;
    vertical-align: top;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 30%;
}
.cases-table td {
    padding: 7px 0 7px 0;
    vertical-align: top;
    border-bottom: 1px solid #dbdbdb;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 70%;
}
.cases-table tr:last-child th {
    border: none;
    }
.cases-table tr:last-child td {
    border: none;
    }
.cases-table ul {
    list-style-type: none;
    padding: 0;
    text-indent: -15px;
    margin: 0 0 0 16px;
}
.cases-table ul li:before {
    margin-right: 10px;
    content: "\2022";
    font-weight: 700;
    font-size: 0.923em;
}
Это HTML:
<table class="cases-table">
<thead>
<tr>
<th colspan="2">Карточка № 1</th>
</tr>
</thead>
<tbody>
<tr>
<th>aaa</th>
<td>
bbb
</td>
</tr>
<tr>
<th>aaa</th>
<td>
bbb
</td>
</tr>
<tr>
<th>aaa</th>
<td>
bbb
</td>
</tr>
</tbody>
</table>
14 ответов

Тыр-тыр

Уберите:
.cases-table tr:last-child th {
    border: none;
}


Тыр-тыр

Ох я волк позорный. Совсем расслабился и даже не посмотрел на остальное. Огромное спасибо!Но мне не нужен border внизу последнего th. Нужен только в thead.


Тыр-тыр

last-child используйте.


Тыр-тыр

Всё равно не получается. Так делаю:
.cases-table tr thead:last-child th {
    border-bottom: 2px solid #bebebe;
}
А их нельзя убирать так как они нужны:
.cases-table tr:last-child th {
    border: none;
    }
.cases-table tr:last-child td {
    border: none;
    }


Тыр-тыр

Тыр-тыр, по какой причине вы используете border-collapse: separate;?


Тыр-тыр

Но мне не нужен border внизу последнего th.
tbody>tr:last-child th{
border-bottom: none;
}
если правильно понял


Тыр-тыр

C border-collapse:
.cases-table {
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    background-color: #ffffff;
    margin-bottom: 29px;
    border: none;
    padding: 20px 18px;
    border-collapse: collapse;
    width: 100%;
    font-size: 0.923em;
}
.cases-table thead th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #bebebe;
    text-align: center;
    color: #000000;
    font-weight: 700;
}
.cases-table th {
    text-align: left;
    padding: 7px 0 7px 1px;
    color: #797979;
    font-weight: 300;
    vertical-align: top;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 30%;
}
.cases-table td {
    padding: 7px 0 7px 0;
    vertical-align: top;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 70%;
}
 
.cases-table tbody tr:not(:last-child){
  border-bottom:1px solid red;
}
C border-separate:
.cases-table {
    box-shadow: 0 1px 6px 0 rgba(0,0,0,0.3);
    background-color: #ffffff;
    margin-bottom: 29px;
    border: none;
    padding: 20px 18px;
    border-collapse: separate;
    width: 100%;
    font-size: 0.923em;
}
.cases-table thead th {
    background-color: #f0f0f0;
    border-bottom: 2px solid #bebebe;
    text-align: center;
    color: #000000;
    font-weight: 700;
}
.cases-table th {
    text-align: left;
    padding: 7px 0 7px 1px;
    color: #797979;
    font-weight: 300;
    vertical-align: top;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 30%;
}
.cases-table td {
    padding: 7px 0 7px 0;
    vertical-align: top;
    line-height: 1.5;
    background: #ffffff;
    border-spacing: 0;
    width: 70%;
}
 
.cases-table tbody tr:not(:last-child) th,
.cases-table tbody tr:not(:last-child) td{
  border-bottom:1px solid red;
}


Тыр-тыр

Тыр-тыр, по какой причине вы используете border-collapse: separate;?
Я уже не помню. Год назад делал. Была причина наверное.mrtoxas, я боюсь мой вариант переделывать - вдруг косяки вылезут в каких-то браузерах. Нужно только добавить border к thead th не трогая ничего другого. Сейчас я могу это сделать только напрямую в html, но так не годится.
если правильно понял
не. речь о другом. а это и так есть.


Тыр-тыр

Я убрал только указание нижней границы для всех th/td и добавил стиль границы для всех, кроме последнего ряда. Т.е. практически такой же код, как у вас, только более правильный, без перебивания стилей.


Тыр-тыр

Я беспокоюсь, что формат tr:not(:last-child) не поддерживается какими-то браузерами и версиями так как поддерживается tr:last-child th Если такой формат ПОЛНОСТЬЮ поддерживается как мной используемый, тогда ок конечно


Тыр-тыр

У :last-child и :not одинаковая поддержка браузерами.


Тыр-тыр

И конструкция в скобках - (:last-child) - тоже?


Тыр-тыр

Скобочки относятся к псевдоклассу :not, поэтому да, тоже. Если вы не встречали такую конструкцию прежде, это не означает, что у нее проблемы с кроссбраузерностью.


Тыр-тыр

Спасибо! Я просто уточняю на всякий случай. Сам то я давно отстал от многого. Царём работаю, но для поддержания формы иногда вожусь со всем этим. Если не я, то кто? Вокруг больше 90% халтурщиков и школоты