Почему цвет рамки ячейки html не изменяется?

Как я могу сделать левую границу ячейки красной? Почему это не работает? Спасибо!!

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.main-table {
    border-collapse: collapse;
}
.main-table td {
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.left-border {
border-left: 1px solid red !important;
}
</style>
</head>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

Должна ли левая граница не переопределять цвет, указанный в .main-table td?

<table class='main-table' cellspacing='0' cellpadding='0'>
<tr>
    <td> 1 </td>
    <td> 366 </td>
</tr>
<tr>
    <td > 2 </td>
    <td class='left-border'> 777 </td>
</tr>
</table>

</body>
</html>

Ответ 1

Установите границу 1px double red. 1-кратная "двойная" граница выглядит идентичной "сплошной", но имеет более высокий приоритет при свернутом вычислении границ.

Ответ 2

Попробуйте это,

.main-table {
    border-collapse: collapse;
}
.left-border {
border-left: 2px solid red !important;
}

Ответ 3

В CSS селектор, который является наиболее специфичным, имеет приоритет над меньшими конкретными. Например, в вашем случае .main-table td имеет приоритет над .left-border, поскольку первый имеет более конкретный характер. Чтобы решить эту проблему, вы можете указать: .main-table td.left-border для переопределения границы. Это более корректно и лучше, чем использование !important, что устраняет все шансы переопределить его дальше.

См. эту ссылку для информации о приоритете выбора CSS: http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/

Ответ 4

Я бы пошел с anglimass, но с одним изменением на css:

td.left-border {
border-left: 1px double red !important;
}

То есть селектор должен иметь дополнительный "td"

(Отредактировано граница 2px до 1px - это была ошибка!)

Ответ 5

Хммм. Похоже, что это зависит от порядка, в котором границы ячеек отображаются браузером. Я пробовал выше в IE8, и это выглядело отлично, но не работало в FF или Chrome.

Затем я попытался сделать правую границу левой ячейки красного, используя ту же самую разметку. На этот раз он не работал в IE, но работал в FF и Chrome.

Если вы сделаете как левую границу правой ячейки красной, так и правую границу левой ячейки красной, она работает во всех них.

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.main-table
{
    border-collapse: collapse;
}
.main-table td
{
    margin: 0px;
    padding: 0px;
    border: 1px solid #aaa;
    padding: 1px 4px 1px 4px;
}
.right-border
{
    border-right: 1px solid red !important;
}
.left-border
{
    border-left: 1px solid red !important;
}
</style>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
    <table class='main-table' cellspacing='0' cellpadding='0'>
        <tr>
            <td> 1 </td>
            <td> 366 </td>
        </tr>
        <tr>
            <td class='right-border'> 2 </td>
            <td class='left-border'> 777 </td>
        </tr>
    </table>
</body>
</html>

Ответ 6

другое решение,

http://jsfiddle.net/yPSVg/

Ответ 7

Значение collapse означает, что границы, если возможно, сбрасываются в одну границу. Вы хотите использовать separate для свойства border-collapse.

Кроме того, у вас есть два закрывающих тега </head>.