HTML таблица Элемент THEAD Цвет фона не округляется

0

У меня есть следующий HTML и CSS

HTML

<table class="StandardTable">
    <thead>
        <tr>
            <th>A</th>
            <th>B</th>
            <th>C</th>
            <th>D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="width: 25%">A</td>
            <td style="width: 25%">B</td>
            <td style="width: 25%">C</td>
            <td style="width: 25%">D</td>
        </tr>
    </tbody>
</table>

CSS

.StandardTable {
    border: 1px solid #656565;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 5px #888888;
    width: 300px;
    margin-bottom: 15px;
    border-spacing: 0;
}
.StandardTable thead {
    border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 5px;
    background-color: lightgray;
}

Я тоже создал jsFiddle для этого. Фон в THEAD всегда истекает кровью/выходит из границы и не округляется.

Я тестировал в IE, FF и хром. Это наиболее очевидно в хроме, потому что кровотечение происходит над границей, где в IE и FF происходит кровотечение.

Очень приветствуем любую помощь в устранении проблемы (чтобы фон был остановлен правильно по краям). Я попытался добавить Border-Radius на элемент TH, но это не сработало.

Теги:

3 ответа

6
Лучший ответ

Вам нужно применить закругленные углы к первой и последней ячейке таблицы в thead. Задайте фон для прозрачного ада и добавьте следующее:

.StandardTable thead th{
    background: lightgray; 
}

.StandardTable thead th:first-of-type{
    border-top-left-radius: 10px; 
}

.StandardTable thead th:last-of-type{
    border-top-right-radius: 10px; 
}

Демо- версия JsFiddle

  • 0
    Это не сработало - jsfiddle.net/n929m/2
  • 0
    Виноват. Я только что обновил код. Пожалуйста, попробуйте еще раз
Показать ещё 1 комментарий
2

попробуйте это (работал для меня в FF)

.StandardTable {
    border: 1px solid #656565;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 5px #888888;
    width: 300px;
    margin-bottom: 15px;
    border-spacing: 0;
}
.StandardTable thead tr th {
    background-color: lightgray;
}

.StandardTable thead tr th:first-child {
    z-index:-1;
    border-radius: 10px 0 0 0;
    -moz-border-radius: 10px 0 0 0;
    border-radius: 10px 0 0 0;
}
.StandardTable thead tr th:last-child {
    z-index:-1;
    border-radius: 0 10px 0 0;
    -moz-border-radius: 0 10px 0 0;
    border-radius: 0 10px 0 0;
}
1

Другим обходным решением является следующее

.StandardTable {
    border: 1px solid #656565;
    border-radius: 10px;
    -moz-border-radius: 10px;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 10px 10px 5px #888888;
    width: 300px;
    margin-bottom: 15px;
    border-spacing: 0;
    background-color: lightgray;
}
.StandardTable tbody tr td {
    background-color: white;
}

.StandardTable tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

.StandardTable tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню