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

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

8 голосов
/ 13 июня 2011

Вот моя скрипка:

http://jsfiddle.net/gFA4p/84/

На этом снимке экрана зеленые линии представляют то место, где я пытаюсь применить пунктирные линии.

enter image description here

Я могу получить границы слева и справа в виде пунктирных линий, но не нижние границы.

Как мне решить эту проблему?

Ответы [ 9 ]

6 голосов
/ 13 июня 2011

Проблема, которую вы видите, связана с правилами разрешения конфликтов, когда дело доходит до коллапса границы.Сплошное имеет приоритет над пунктирным:

http://lachy.id.au/dev/css/tests/bordercollapse/bordercollapse.html

Я полагаю, что вам также понадобится сделать пунктирными конфликтующие границы.Поэтому, если вы прошли пунктирную левую границу ячейки, вам нужно сделать так, чтобы правая граница ячейки слева от нее также была пунктирной (или что-то более низкого приоритета, но пунктирная имеет смысл).

6 голосов
/ 16 июня 2011

Вот решение:

  1. Если вы не укажете четыре границы для каждой ячейки, а только левую и нижнюю границы, вы избежите конфликтов границ: 

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

  2. Затем, чтобы сделать пунктирные границы в четвертом столбце, вам просто нужно применить классы dottedLeftBorder и dottedBottomBorder к его ячейкам (но только к dottedLeftBorder класс для последней ячейки).

Теперь вот соответствующая скрипка: http://jsfiddle.net/Fvds5/3/,, где каждая ячейка в четвертом столбце теперь имеет левую и нижнюю пунктирную черные границы 1px, кроме последней, которая не имеет точечнойнижняя граница.

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

Вот моя скрипка:

http://jsfiddle.net/gFA4p/109/

enter image description here

Все, что я сделал, это добавил 

.dottedBottomBorder {
    border-top: none !important;
} 

.dottedRightBorder + .dottedBottomBorder {
    border-top: 1px solid black !important;
}

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

У вас проблема в том, что сплошная граница нижней ячейки перекрывает пунктирную границу верхней ячейки.Это облегчает это.

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

Хорошо, этот ответ частично разработан на основе информации, представленной в предыдущих ответах, но простого добавления !important или создания пунктирной левой и правой границ соседних ячеек недостаточно.

Во-первых, механизм рендеринга между различными браузерами не одинаков. Эта скрипка показывает две строки по общей высоте 4 строки в IE, FF и Opera. Но Chrome и SafariWin сокращают левую строку до одной строки.

Чтобы компенсировать это, я добавил дополнительный фиктивный столбец, который также оказался очень полезным для устранения большинства классов в HTML.

Во-вторых, базовый стиль CSS теперь дает только левую и нижнюю границу для ячеек. В результате последние ячейки получили стиль lastCol, поскольку IE7 не добавляет границы к тегу tr.

Вот пересмотренная скрипта , протестированная с IE7, IE8, IE9, FF, Opera, SafariWin и Chrome.

Edit:

Если вы действительно не хотите фиктивный столбец, мне удалось получить так далеко , но это решение не работает в Chrome или SafariWin. (Происходит что-то странное. Может быть, кто-то еще может объяснить.)

0 голосов

С помощью jQuery вы можете:

  • найти все элементы в этом столбце wanna-have-geen-border
  • дать им всем пунктирный зеленый лев
  • дать им всю пунктирную нижнюю зеленую рамку
    • используйте: last для удаления нежелательной нижней границы из последнего элемента

Вы можете найтивсе строки в этом столбце, выполнив что-то вроде: 

$(td[class*="greenBorder"]).addClass("green_borders");
$(td[class*="greenBorder"]).last().css('border-bottom','')

Обратите внимание, что я говорю что-то вроде этого, потому что я не очень хорош в jQuery и не обладаю правильным синтаксисом / пониманием того, как используются селекторы.Но я видел примеры, где подобные вещи делаются.Вы можете найти тонны примеров этого сайта или ознакомиться с оригинальной документацией (что довольно плохо, imho).

Хорошо, я сделал это: 

    <!DOCTYPE HTML>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="application/xhtml+xml; charset=UTF-8" />
    <title>Green Border</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <style type="text/css">
    .geniusPicks {}
    .geniusPicks table {width:100%; font-size:12px;}
    .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.pickConsensusBody td {border:1px solid; background:grey;}
    .geniusPicks table tr.pickBody td {border:1px solid;}
    .bigGap td {height:19px;}
    .smallGap td {height:10px;}
    .geniusPicks table th,
    .geniusPicks table th+th+th+th+th+th,
    .geniusPicks table .pickHeading+tr td,
    .geniusPicks table .pickHeading+tr td+td+td+td+td+td+td {text-align:center;}
    .geniusPicks table th+th+th,
    .geniusPicks table .pickHeading+tr td+td+td {text-align:left;}
    .borderLeftRadius {
        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;
    }
    .borderRightRadius {
        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;
    }
    </style>
    <script type="text/javascript">
$(document).ready(function() {
    var green = jQuery("td[name='green']");
    green.each(function(){

        var cl = $(this).attr('class');
        var prev = $(this).prev();
        $(this)
            .css('border-color','#aeaeae')
            .css('border-style','dotted')
            .css('border-right-style','solid')
            .css('border-right-color','black')
            .addClass(function(i,currentClass){ return "dotted"; });

        if (prev.attr('class') == "dottedRightBorder") {
            prev.css('border-right-style','dotted')
                .css('border-right-color','#aeaeae')
        }

        if (cl=="top") {
            $(this)
                .css('border-top-style','solid')
                .css('border-top-color','black')
        } else 

        if (cl=="bottom"){
            $(this)
                .css('border-bottom-style','solid')
                .css('border-bottom-color','black')
        }
    });
});
    </script>
    </head>
    <body>
    <div class="geniusPicks">
        <table cellpadding="1" cellspacing="0">

            <thead>
                <tr id="picksHeading">
                    <th class="borderLeftRadius">Sport</th>
                    <th>Status</th>
                    <th colspan="2">Pick</th>
                    <th>Genius</th>
                    <th>Genius Credential</th>

                    <th class="borderRightRadius">Result</th>
                </tr>
            </thead>
            <tbody>
                <tr class="bigGap">
                    <td colspan="7"></td>
                </tr>
                <tr class="pickHeading">

                    <td colspan="7" class="borderLeftRadius">blah</td>
                </tr>
                <tr class="pickConsensusBody">
                    <td rowspan="4">moo</td>
                    <td rowspan="4">flah</td>
                    <td rowspan="4" class="dottedRightBorder">glah</td>
                    <td name="green" class="top">vlah</td>

                    <td>mlah</td>
                    <td>nlah</td>
                    <td rowspan="4">jlah</td>
                </tr>
                <tr class="pickConsensusBody">
                    <td name="green" >clah</td>
                    <td>dlah</td>

                    <td>xlah</td>
                </tr>
                <tr class="pickConsensusBody">
                    <td name="green" >plah</td>
                    <td>slah</td>
                    <td>klah</td>
                </tr>

                <tr class="pickConsensusBody">
                    <td name="green" class="bottom">qlah</td>
                    <td>wlah</td>
                    <td>zlah</td>
                </tr>

                <tr class="smallGap">
                    <td colspan="7"></td>

                </tr>

                <tr class="pickHeading">
                    <td colspan="7" class="borderLeftRadius">blah</td>
                </tr>
                <tr class="pickBody">
                    <td rowspan="4">moo</td>
                    <td rowspan="4">flah</td>

                    <td rowspan="4" class="dottedRightBorder">glah</td>
                    <td name="green" class="top">vlah</td>
                    <td>mlah</td>
                    <td>nlah</td>
                    <td rowspan="4">jlah</td>
                </tr>

                <tr class="pickBody">
                    <td name="green" >clah</td>
                    <td>dlah</td>
                    <td>xlah</td>
                </tr>
                <tr class="pickBody">
                    <td name="green">plah</td>

                    <td>slah</td>
                    <td>klah</td>
                </tr>
                <tr class="pickBody">
                    <td name="green" class="bottom">qlah</td>
                    <td>wlah</td>
                    <td>zlah</td>

                </tr>

                <tr class="smallGap">
                    <td colspan="7"></td>
                </tr>
            </tbody>
        </table>
    </div>
0 голосов
/ 15 июня 2011

Это работает, если я добавляю встроенные стили в HTML и избавляюсь от имен классов.

http://jsfiddle.net/jasongennaro/xWSKD/1/

РЕДАКТИРОВАТЬ

Это также работает, если я добавляю стили к CSS с !important объявлением 

.dottedRight{border-right:2px dotted black !important;}

.dottedBottom{border-bottom:2px dotted black !important;}

http://jsfiddle.net/jasongennaro/xWSKD/2/

Примечание

Скрипты показывают пунктирную линию как red только для указания изменения.См. Приведенный выше код для правильного использования.

Кроме того, см. Комментарий ниже о последствиях использования !important ( Каковы последствия использования "! Important" в CSS? )

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

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

.geniusPicks table tr.pickConsensusBody td {
    background: none repeat scroll 0 0 grey;
    border: 1px solid;
}

edit: кто-то бил меня на ~ 20 секунд здесь ...

0 голосов
/ 15 июня 2011 
.geniusPicks table tr.pickConsensusBody td {border:1px solid; background:grey;}

Это ваша проблема. Я думаю, что вы должны назначать отдельные классы для ячеек таблицы вместо общих назначений а-ля TR> TD Может быть, есть способ с меньшими хлопотами, хотя, не уверен. Но в основном эта линия переопределяет ваш пунктирный стиль.

...