Как я могу эмулировать "<TABLE RULES>" с помощью CSS?

Question

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

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

Еслиэто проясняет ситуацию, вот что я снимаю, поскольку (бедный) ascii art:

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

(«Внутренний» стол выглядит как сетка крестики-нолики; «внешний»)ячейка таблицы имеет непрерывную границу)

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

Answer 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; }

Редактировать

После перечитывания я понял, что вы не искали разделенные границы в одной таблице, а только для подавления границ, кроме как между ячейками во вложенной таблице. Это намного проще 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;
    }

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

Единственная проблема здесь в том, что 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.

Answer 2

Вы можете отменить реализацию Mozilla атрибута rules, который полностью в CSS:

http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l289 и http://hg.mozilla.org/mozilla-central/file/3fd770ef6a65/layout/style/html.css#l337 - стили, проходящие через строку 410.

Answer 3

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

Простая таблица (альбет без тела):

<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

Вместо использования псевдо-селекторов :

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

Answer 4

Спецификация HTML5 содержит правила CSS в разделе « Рендеринг ». Просто выберите значение 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;
}