Использование контекстного стиля для таблицы, чтобы применить пунктирные границы к определенным ячейкам - PullRequest
Новая
       36

Использование контекстного стиля для таблицы, чтобы применить пунктирные границы к определенным ячейкам

7 голосов
/ 24 июня 2011

Ранее я задавал вопрос по этому вопросу, на который вы, ребята, давали фантастические ответы. С тех пор я «открыл» опьяняющую силу контекстного стиля (http://www.w3.org/TR/css3-selectors/#selectors) - еще раз спасибо вам всем - и теперь я подсел.

Я добился хорошего прогресса в применении контекстного стиля к моему текущему дизайну здесь:

http://jsfiddle.net/gFA4p/200/

Однако я столкнулся с несколькими проблемами.

Вот скриншот того, что я пытаюсь сделать:

enter image description here

Мой первый вопрос: не переусердствую ли я, пытаясь применить контекстные правила и усложняя это, чем нужно?

Два, если нет, что мне нужно сделать, чтобы выполнить мой целевой стиль, согласно скриншоту?

Три, как сделать этот кросс-браузер совместимым? Даже в том виде, в каком оно есть, в других браузерах это выглядит шатко.

Ответы [ 3 ]

1 голос
/ 25 июня 2011

Я не думаю, что вы сможете достичь этого, не поместив некоторые классы в соответствующие теги TR и TD в вашем HTML.В этой скрипке я добавил класс first к каждому TR первого ряда, класс last к каждому TR последнего ряда и класс пунктир в ячейки, которые должны быть пунктир.Затем с помощью следующих дополнительных стилей я смогу показать, что вам нужно. 

.geniusPicks table td.dotted {border: 1px dotted black !important;}
.geniusPicks table tr.first td.dotted {border-top: none !important;}
.geniusPicks table tr.last td.dotted {border-bottom-style: solid !important;}
.geniusPicks table tr.pickBody.first td.dotted {border-top: 1px solid black !important;}
0 голосов
/ 01 июля 2011

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

Текущий стиль (цветные и сплошные черные границы) в вашем примере превосходит фактическое содержимое.Некоторые ресурсы:

0 голосов
/ 27 июня 2011

Использование CSS-селекторов не является чрезмерным усердием, если позволяет вашему HTML-коду и таблицам стилей быть проще, легче для понимания и изменения; например, с меньшим количеством className атрибутов в вашем HTML.
Кроме того, это лучший способ выучить их!

Для второй части вашего вопроса, я предлагаю вам этот CSS ( http://jsfiddle.net/S8Bne/): 

.geniusPicks {}

.geniusPicks table {width:100%; font-size:12px; border-collapse:separate;}

.geniusPicks table tr#picksHeading {border:0px solid; height:30px;}

.geniusPicks table tr#picksHeading th {background:darkRed; color:white; font-weight:bold;}

.geniusPicks table tr.pickHeading {border:0px solid;}

.geniusPicks table tr.pickHeading td {background:red; padding-left:10px;}

.geniusPicks table tr.pickHeading+tr td:last-child {border-right:solid 1px black;}

.geniusPicks table tr.pickConsensusBody td {
    border-left:1px solid;
    border-top:1px solid;
    background:grey;
}

.geniusPicks table tr.pickBody td {
    border-left:1px solid;
    border-top:1px solid;
}

.bigGap td {height:19px;}

.smallGap td {height:10px; border-top:solid 1px black;}

.geniusPicks table th,
.geniusPicks table th:last-child,
.geniusPicks table .pickHeading+tr td,
.geniusPicks table .pickHeading+tr td:last-child {text-align:center;}


.geniusPicks table th+th+th, 
.geniusPicks table .pickHeading+tr td+td+td {text-align:left;}

/* Border Left Radius */
.geniusPicks table thead tr#picksHeading th:first-child, .geniusPicks table tr.pickHeading td {
    border-radius:15px 0 0 0; 
    -moz-border-radius:15px 0 0 0;
    -webkit-border-radius:15px 0 0 0;
    -khtml-border-radius:15px 0 0 0;
}

/* Border Right Radius */
.geniusPicks table thead tr#picksHeading th:last-child {
    border-radius:0 15px 0 0; 
    -moz-border-radius:0 15px 0 0;
    -webkit-border-radius:0 15px 0 0;
    -khtml-border-radius:0 15px 0 0;
}


.geniusPicks table .pickHeading+tr td:nth-child(4) {
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
    border-top-style:solid;
    border-top-color:black;
    border-top-width:1px;
}

.geniusPicks table tr.pickConsensusBody td:first-child:not([rowspan]),
.geniusPicks table tr.pickBody td:first-child:not([rowspan]) {
    border-top-style:dotted;
    border-top-color:black;
    border-top-width:1px;
    border-left-style:dotted;
    border-left-color:black;
    border-left-width:1px;
}

Хорошая особенность этого решения в том, что оно вообще не требует изменения вашего HTML-кода.

Однако границы, которые должны быть пунктирными, останутся сплошными, если браузер (например, IE8) не поддерживает псевдокласс CSS3 :nth-child или :not.

Скажите, предпочитаете ли вы что-то, что полагается только на CSS2? Но в этом случае будет необходимо либо добавить атрибут class к каждой ячейке, которая должна быть разбита, или разделить каждую строку, содержащую 7 ячеек, чтобы каждая ячейка "Влах" стала первым дочерним элементом в этой строке.

...