Как я могу эмулировать "<ПРАВИЛА ТАБЛИЦЫ>" с помощью CSS?

Я пишу веб-приложение с помощью ExtJS. Я кладу стол в стол, и по разным причинам невозможно реорганизовать все это в одну большую таблицу с помощью rowspan/colspan и т.д.

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

Если это делает вещи более ясными, это то, за что я стреляю, как (плохое) искусство ascii:

-----------------
|               |
|     |   |     |
|  -----------  |
|     |   |     |
|  -----------  |
|     |   |     |
|               |
-----------------

( "Внутренняя" таблица выглядит как сетка tic-tac-toe, "внешняя" ячейка таблицы имеет непрерывную границу)

Я огляделся и нашел атрибут <table> под названием RULES, который звучит так, как будто он делает это. Однако, похоже, он плохо поддерживается, и в любом случае я не должен ставить стиль в разметку (не так ли?). Документация, которую я нашел, говорит: "Используйте CSS вместо", но я не могу найти простой способ сказать "установить границу между ячейками, но не если край ячейки касается внешней таблицы" в CSS, Помощь?

ОТВЕТЫ

Ответ 1

Этот http://codepen.io/morewry/pen/GnBFu близок как можно ближе. Я подозреваю, что будут некоторые проблемы с поддержкой , а выравнивание ячеек отключено на величину border-spacing.

table{
    table-layout:fixed;
    border-collapse:separate;
    border-spacing:0.25em;
    border:1px solid red;
}
    tr{
        display:block;
        border-bottom:1px dashed blue;
    }
    tr:last-child{ border:0; }
        td{
            padding-right:0.25em;
            vertical-align:top;
            border:1px dotted orange;
            border-width:0 1px;
        }
        td:first-child,
        td + td{ border-left:0; }
        td:last-child{ padding-right:0; border-right:0; }

Edit

После повторного чтения я понял, что вы не искали разделенные границы в одной таблице, а только для того, чтобы подавлять границы, кроме ячеек на вложенной таблице. Это намного проще http://codepen.io/morewry/pen/yxvGg:

table{
    table-layout:fixed;
    border-collapse:collapse;
    border-spacing:0;
    border-style:hidden;
}
    td{
        padding:0.25em;
        border:1px solid black;
    }

Разрешение конфликтов границ утверждает, что стиль border-style: hidden имеет приоритет, поэтому единственные, которые появляются в свернутой модели, находятся между ячейками.

Единственная проблема здесь в том, что IE не поддерживает скрытые, поэтому для IE вам потребуются обходные пути. Псевдоклассы должны работать для IE8. Я не думаю, что IE7 поддерживал: last-child, поэтому ему понадобится дополнительная помощь, а IE6 потребуется обходное решение для обоих: first-child и last-child.

Для IE8 и IE7 следующее будет имитировать border:hidden

table{ border:2px solid transparent; }

В этих браузерах вы получите еще 2 пикселя прозрачного пространства, но это более эффективно. IE6, как я помню, не поддерживает должным образом прозрачные границы, у него все еще будут проблемы. См. http://codepen.io/morewry/pen/bIvJa.

Ответ 3

Простой пример: http://jsfiddle.net/xixionia/v3eVq/

Простая таблица (albiet without tbody):

<table>
    <tr>
        <td>00</td>
        <td>01</td>
        <td>02</td>
    </tr>
    <tr>
        <td>10</td>
        <td>11</td>
        <td>12</td>
    </tr>
    <tr>
        <td>20</td>
        <td>21</td>
        <td>22</td>
    </tr>
</table>

Простой CSS (albiet не полностью совместим со всеми браузерами):

/* outline */
table
{
    border: 2px solid red;
}

/* rows */
tr
{
    border-top: 2px solid black;
    border-bottom: 2px solid black;
}

/* columns */
td
{
    padding: 10px;
    border-left: 2px solid black;
    border-right: 2px solid black;
}

/* resets */
tr:first-child
{
    border-top: none;
}

tr:last-child
{
    border-bottom: none;
}

td:first-child
{
    border-left: none;
}

td:last-child
{
    border-right: none;
}

Ссылка на псевдоселектор в школах W3: http://www.w3schools.com/css/css_pseudo_classes.asp

Вместо использования psuedo-selectors:

Вы можете установить класс для каждого первого ребенка и последнего ребенка и использовать этот класс в качестве селектора.

Ответ 4

Спецификация HTML5 содержит правила CSS в разделе " Rendering". Просто выберите значение rule, которое вы ищете, и выберите соответствующий CSS. Позвольте мне скопировать и вставить правила для <table rules=...>:

Примечание: "i" в селекторе атрибутов является CSS4 и игнорирует регистр. То есть rules=ROWS не хуже rules=ROWS.

table {
  box-sizing: border-box;
  border-spacing: 2px;
  border-collapse: separate;
  text-indent: initial;
}

table, td, th { border-color: gray; }
thead, tbody, tfoot, tr { border-color: inherit; }
table[rules=none i], table[rules=groups i], table[rules=rows i],
 ... and many more selectors in this fashion ...
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  border-color: black;
}

table[rules=none i], table[rules=groups i], table[rules=rows i],
table[rules=cols i], table[rules=all i] {
  border-style: hidden;
  border-collapse: collapse;
}

table[rules=none i] > tr > td, table[rules=none i] > tr > th,
table[rules=groups i] > tr > td, table[rules=groups i] > tr > th,
table[rules=rows i] > tr > td, table[rules=rows i] > tr > th 
   ... more selectors for none/groups/rows ...
{
  border-width: 1px;
  border-style: none;
}
table[rules=cols i] > tr > td, table[rules=cols i] > tr > th,
table[rules=cols i] > thead > tr > td, table[rules=cols i] > thead > tr > th,
table[rules=cols i] > tbody > tr > td, table[rules=cols i] > tbody > tr > th,
table[rules=cols i] > tfoot > tr > td, table[rules=cols i] > tfoot > tr > th {
  border-width: 1px;
  border-style: none solid;
}
table[rules=all i] > tr > td, table[rules=all i] > tr > th,
table[rules=all i] > thead > tr > td, table[rules=all i] > thead > tr > th,
table[rules=all i] > tbody > tr > td, table[rules=all i] > tbody > tr > th,
table[rules=all i] > tfoot > tr > td, table[rules=all i] > tfoot > tr > th {
  border-width: 1px;
  border-style: solid;
}

table[rules=groups i] > colgroup {
  border-left-width: 1px;
  border-left-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
}
table[rules=groups i] > thead,
table[rules=groups i] > tbody,
table[rules=groups i] > tfoot {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

table[rules=rows i] > tr, table[rules=rows i] > thead > tr,
table[rules=rows i] > tbody > tr, table[rules=rows i] > tfoot > tr {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}