Colspan / Rowspan для элементов, отображение которых установлено как таблица-ячейка

109

У меня такой код:

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan2 {
        /* What to do here? */
    }
</style>

Довольно просто. Как добавить colspan (или эквивалент colspan) для элементов с display: table-cell?

html  css 
— Призрак Мадары
источник
5
Разве ты не можешь просто использовать стол? Было бы намного проще. Плюс, если это табличные данные, это тоже будет более семантическим.
— punkrockbuddyholly
@thirtydot, вероятно, может, это было бы просто болью и ненужностью. Системы сетки, такие как 960, в основном достигают этого, но для всего макета страницы.
— punkrockbuddyholly
@MrMisterMan: Я не уверен, что вы говорите. 960.gs не использует display: table-cell.
— 30dot
@thirtydot извините, я забыл конкретный вопрос, заданный OP. Вы правы, вы не можете добавить colspan через CSS. Я указывал, что вы можете заставить div вести себя как строки и столбцы, включая ячейки, охватывающие несколько столбцов.
— punkrockbuddyholly
Используйте смоделированную таблицу, как вы это делаете для первого уровня организации, что даст вам возможность, например, создать липкий нижний колонтитул. для эмуляции colspan вы можете создать вложенную таблицу в своей уникальной ячейке, которая будет иметь одну строку и столько ячеек, сколько вам нужно, или использовать простой плавающий div.
— Бернар Дюзаблон 02

Ответы:

27

Поскольку OP явно не предписывает, что решение должно быть чистым CSS, я буду упрям ​​и предложу обходной путь, который я нашел сегодня, тем более что он намного элегантнее, чем таблица внутри таблицы.

Пример равен <table> с двумя ячейками в строке и двумя строками, где ячейка во второй строке - это td с colspan="2".

Я тестировал это с Iceweasel 20, Firefox 23 и IE 10.

div.table {
  display: table;
  width: 100px;
  background-color: lightblue;
  border-collapse: collapse;
  border: 1px solid red;
}

div.row {
  display: table-row;
}

div.cell {
  display: table-cell;
  border: 1px solid red;
}

div.colspan,
div.colspan+div.cell {
  border: 0;
}

div.colspan>div {
  width: 1px;
}

div.colspan>div>div {
  position: relative;
  width: 99px;
  overflow: hidden;
}
<div class="table">
    <div class="row">
        <div class="cell">cell 1</div>
        <div class="cell">cell 2</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div><div>
                cell 3
            </div></div>
        </div>
        <div class="cell"></div>
    </div>
</div>
Развернуть фрагмент

Живое действие (демо) здесь .

РЕДАКТИРОВАТЬ: я доработал код, чтобы он был более удобным для печати, поскольку они по умолчанию оставляют фоновые цвета. Я также создал rowspan-demo , вдохновленный поздним ответом здесь.

— F-3000
источник
Ищу подобное решение. Но вместо этого у меня в верхнем ряду 5 ячеек. В нижнем ряду мне нужна 1 ячейка того же размера, что и верхний ряд. Затем одна ячейка имеет colspan = 2, а другая ячейка имеет colspan = 2, в результате чего в нижней строке также будет 5 ячеек. Вот проблема jsfiddle, основанная на вашем решении. Есть предположения? jsfiddle.net/7wdza4ye/1
— Варун Верма
1
@VarunVerma, вы должны добавить пустую ячейку между ячейками 7 и 8. Просто добавление <div class="cell"></div>работает (по крайней мере, с Firefox). В этом дизайне вам нужно заполнить пустыми ячейками. Например, если бы у вас было так, что ячейка 7 была colspan = 3, а ячейка 8 была нормальной, тогда вам понадобились бы две пустые ячейки между ячейками 7 и 8. Если вы не разработали что-то еще (поля? Один настраиваемый div?) . Кроме того, ширина 100 пикселей и 5 ячеек усложняют задачу, потому что слова растягивают css-ячейки, настройки переполнения, похоже, не имеют значения. Кроме того, необходимо пересчитать widthдля div.colspan>div>div.
— F-3000
это сработало. Спасибо. Фактически, я добавил пустую ячейку после ячейки 8, потому что нижняя граница не отображалась. Вот последняя версия : jsfiddle.net/7wdza4ye/3 . Был уверен, как получить границу между ячейками 7 и 8. Есть предложения? Спасибо за вашу помощь.
— Варун Верма
1
@VarunVerma, в Chrome внешняя граница была неполной без пустой ячейки после 8, поэтому это действительно необходимо. Простой способ добавить границы между ячейками 7 и 8 может быть таким: div.colspan{border-left:1px solid red}. Его нужно разместить где-нибудь под правилом, которое устанавливает div.colspan без полей, иначе оно будет отменено.
— F-3000,
Спасибо @ F-3000. Это было полезно. В остальном, вот последняя ссылка, основанная на решении F-3000: jsfiddle.net/7wdza4ye/4
— Варун Верма
16

Более простое решение, которое работает для меня в Chrome 30:

Colspan можно эмулировать, используя display: tableвместо display: table-rowстрок:

.table {
    display: block;
}
.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
}
.row.colspan2 {/* You'll have to add the 'colspan2' class to the row, and remove the unused <div class=cell> inside it */
    display: block;
}

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

— Филипп97
источник
7

Если вы ищете простой способ CSS для имитации colspan, вы можете использовать display: table-caption.

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #000;
}
.colspan2 {
  /* What to do here? */
  display: table-caption;
}
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2">Cell</div>
    </div>
</div>
Развернуть фрагмент

— stacigh
источник
Это потрясающе, ты молодец!
— Радж Камаль,
1
Использование display: table-caption охватит все столбцы и поместит строку в верхнюю часть таблицы, как элемент заголовка в таблице html, поэтому на самом деле это не работает. Только если вы хотите охватить все столбцы в первой или последней строке.
— Michiel
6

Просто используйте table.

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

Это похоже на табличные данные (строки / столбцы данных). Поэтому я бы рекомендовал использовать table.

См. Мой ответ на этот вопрос для получения дополнительной информации:

создание того же самого с div как таблицы

— односложный
источник
11
Дело в том, что это не для табличных данных, поэтому я не хочу использовать таблицу :)
— Madara's Ghost
13
Я не понимаю, почему CSS-кодирование всего, чтобы вести себя точно так же, как таблица, почему-то предпочтительнее, чем просто использование таблицы. По общему признанию tr/ tdспам - не самый красивый html, но это единственная причина? Все говорят, что таблицы не «предназначались» для форматирования, но сам html «не предназначался» для выполнения половины того, что мы считаем приемлемым по сегодняшним стандартам, включая веб-приложения.
— Легкий
4
Почти год спустя, но - Незначительное, я разделяю ваше раздражение по поводу людей, избегающих столов по той простой причине, что «столы вышли из моды». Однако я сталкиваюсь с несколькими адаптивными дизайнами, в которых полезно, чтобы таблица не была таблицей, чтобы ее можно было изменить на меньшую ширину. То, что у меня нет colspan для div, меня разочаровывает.
— spinn
4

Вот один из способов объединения столбцов в CSS, который я использовал в своей ситуации.

https://jsfiddle.net/mb8npttu/

<div class='table'>
    <div class='row'>
        <div class='cell colspan'>
            spanning
        </div>
        <div class='cell'></div>
        <div class='cell'></div>
    </div>

    <div class='row'>
        <div class='cell'>1</div>
        <div class='cell'>2</div>
        <div class='cell'>3</div>
    </div>
</div>

<style>
    .table { display:table; }
    .row { display:table-row; }
    .cell { display:table-cell; }
    .colspan { max-width:1px; overflow:visible; }
</style>
— Тим
источник
2
Я должен был увеличить .colspanс , white-space: nowrap;чтобы получить результат , что я хотел, но он работал большой.
— kshetline 01
2

Есть решение сделать colspan шириной всей таблицы. Вы не можете использовать эту технику для разворачивания части таблицы.

Код:

    *{
      box-sizing: border-box;
    }
    .table {
        display: table;
        position: relative;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
        border: 1px solid red;
        padding: 5px;
        text-align: center;
    }
    .colspan {
        position: absolute;
        left: 0;
        width: 100%;
    }
    .dummycell {
        border-color: transparent;
    }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell dummycell">&nbsp;</div>
        <div class="cell colspan">Cell</div>
    </div>
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
</div>
Развернуть фрагмент

Объяснение:

Мы используем абсолютную позицию для colspan, чтобы сделать его во всю ширину таблицы. Сама таблица требует относительного положения. Мы используем фиктивную ячейку для поддержания высоты строк, абсолютная позиция не соответствует потоку документа.

Конечно, в наши дни вы также можете использовать flexbox и grid для решения этой проблемы.

— JT Houtenbos
источник
1

CSS

.tablewrapper {
  position: relative;
}
.table {
  display: table;
  position: relative
}
.row {
  display: table-row;
}
.cell {
  border: 1px solid red;
  display: table-cell;
}
.cell.empty
{
  border: none;
  width: 100px;
}
.cell.rowspanned {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100px;
}
.cell.colspan {
  position: absolute;
  left: 0;
  right: 0;
}

HTML 

<div class="tablewrapper">
  <div class="table">
    <div class="row">
      <div class="cell rowspanned">
        Center
      </div>
      <div class="cell">
        Top right
      </div>
    </div>
    <div class="row">
      <div class="cell empty"></div>
      <div class="cell colspan">
        Bottom right
      </div>
    </div>
  </div>
</div>

Код

— бдеревяга
источник
1

Это можно сделать с помощью чистого CSS и центрирования текста по «фальшивому» столбцу.

Хитрость заключается в том, чтобы установить строки position:relative, затем разместить «пустые блоки div» в том месте, rowгде вы хотите создать colspan(они должны быть heightдля работы), установить, cellгде находится контент display:grid, и, наконец, применить position:absoluteк элементу внутри ячейки (и центрируйте ее, как вы можете центрировать любой другой абсолютный элемент).

 .table {
        display: table;
  }
  .row {
      display: table-row;
      position: relative;
  }
  .cell {
      display: table-cell;
      background-color: blue;
      color: white;
      height: 26px;
      padding: 0 8px;
  } 
  .colspan2 {
      display: grid;
  }
  .colspan2 p {
    position:absolute;
    left: 50%;
    transform:translateX(-50%);
    margin: 0;
  }
<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan2"><p>Cell</p></div>
        <div class="cell"></div>
    </div>
</div>
Развернуть фрагмент

— Joe82
источник
0

Используя соответствующие классы div и атрибуты CSS, вы можете имитировать желаемые эффекты colspan и rowspan.

Вот CSS

.table {
    display:table;
}

.row {
    display:table-row;
}

.cell {
    display:table-cell;
    padding: 5px;
    vertical-align: middle;
}

Вот образец HTML

<div class="table">
    <div class="row">
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">X</div>
                    <div class="cell">Y</div>
                    <div class="cell">Z</div>
                </div>
                <div class="row">
                    <div class="cell">2</div>
                    <div class="cell">4</div>
                    <div class="cell">6</div>
                </div>
            </div>
        </div>
        <div class="cell">
            <div class="table">
                <div class="row">
                    <div class="cell">
                        <div class="table">
                            <div class="row">
                                <div class="cell">A</div>
                            </div>
                            <div class="row">
                                <div class="cell">B</div>
                            </div>
                        </div>
                    </div>
                    <div class="cell">
                        ROW SPAN
                    </div>    
                </div>
            </div>
        </div>
    </div>
</div>

Из того, что я вижу как в вопросах, так и в большинстве ответов, люди, кажется, забывают, что в любой данный div, который действует как «ячейка таблицы», вы можете вставить другой div, который действует как встроенная таблица, и запустить процесс над.

*** Это не гламурно, но это действительно работает для тех, кто ищет этот тип форматирования, и они хотят избежать ТАБЛИЦ. Если это для DATA LAYOUT, ТАБЛИЦЫ все еще работают в HTML5.

Надеюсь, это кому-то поможет.

— JRC
источник
Во - первых, HTML5 имеет полную поддержку <table>- это просто , что люди должны избегать его использования для визуального форматирования . Использование его для отображения структурированных данных, где она должна быть использована , если что - то другое (например <ul>, просто как пример) лучше подходит для выполнения этой задачи. Во-вторых, чувак, 4 стола. Вы вносите интересный вопрос в таблицу (rowspan), но ваш ответ требует его использования <table>. Я должен посмотреть, как здесь работает мое решение ...
— F-3000,
Я бы отредактировал свой предыдущий комментарий, но срабатывает timelimit. Как и в случае с моим ответом о colspan, rowspan может быть выполнен с НАМНОГО меньше хлопот, чем с вашим ... оригинальным подходом. Смотрите сами .
— F-3000
Спасибо за ваш отзыв. Я никогда не говорил, что HTML5 не поддерживает таблицы. Многие люди просто стараются избежать этого. Иногда при написании веб-приложения (в отличие от страницы рекламного типа) вам нужно больше фиксированного макета для размещения кнопок и / или элементов управления.
— JRC
0

Вы можете установить положение содержимого colspan как «относительное», а строку как «абсолютное» следующим образом:

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
— Justo
источник
0

Вы не можете этого добиться в настоящее время.

AFAIK это будет охвачено таблицами CSS , спецификацией, которая, похоже, в настоящее время находится в состоянии «незавершенная работа».

— naXa
источник
0

Вы можете попробовать это решение, где вы можете узнать, как применить colspan с помощью div https://codepen.io/pkachhia/pen/JyWMxY

HTML:

<div class="div_format">
            <div class="divTable">
                <div class="divTableBody">
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Project Name</div>
                        <div class="divTableCell cell_value">: Testing Project</div>
                        <div class="divTableCell cell_lable">Project Type</div>
                        <div class="divTableCell cell_value">: Web application</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Version</div>
                        <div class="divTableCell cell_value">: 1.0.0</div>
                        <div class="divTableCell cell_lable">Start Time</div>
                        <div class="divTableCell cell_value">: 2016-07-10 11:00:21</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Version</div>
                        <div class="divTableCell cell_value">: 2.0.0</div>
                        <div class="divTableCell cell_lable">End Time</div>
                        <div class="divTableCell cell_value">: 2017-07-10 11:00:23</div>
                    </div>
                    <div class="divTableRow">
                        <div class="divTableCell cell_lable">Document Revision</div>
                        <div class="divTableCell cell_value">: 3</div>
                        <div class="divTableCell cell_lable">Overall Result</div>
                        <div class="divTableCell cell_value txt_bold txt_success">: Passed</div>
                    </div>                          
                </div>
                <div class="divCaptionRow">
                    <div class="divCaptionlabel">Description</div>
                    <div class="divCaptionValue">: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore</div>
                </div>
            </div>
        </div>

CSS:

body {
                font-family: arial
            }
            * {
                -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box
            }
            .div_format {
                width: 100%;
                display: inline-block;
                position: relative
            }           
            .divTable {
                display: table;
                width: 100%;            
            }
            .divTableRow {
                display: table-row
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group
            }
            .divTableCell,
            .divTableHead {
                display: table-cell;
                padding: 10px
            }
            .divTableHeading {
                background-color: #EEE;
                display: table-header-group;
                font-weight: bold
            }
            .divTableFoot {
                background-color: #EEE;
                display: table-footer-group;
                font-weight: bold
            }
            .divTableBody {
                display: table-row-group
            }
            .divCaptionRow{
                display: table-caption;
                caption-side: bottom;
                width: 100%;
            }
            .divCaptionlabel{
                caption-side: bottom;
                display: inline-block;
                background: #ccc;
                padding: 10px;
                width: 15.6%;
                margin-left: 10px;
                color: #727272;
            }
            .divCaptionValue{
                float: right;
                width: 83%;
                padding: 10px 1px;
                border-bottom: 1px solid #dddddd;
                border-right: 10px solid #fff;
                color: #5f5f5f;
                text-align: left;
            }

            .cell_lable {
                background: #d0d0d0;
                border-bottom: 1px solid #ffffff;
                border-left: 10px solid #ffffff;
                border-right: 10px solid #fff;
                width: 15%;
                color: #727272;
            }
            .cell_value {
                border-bottom: 1px solid #dddddd;
                width: 30%;
                border-right: 10px solid #fff;   
                color: #5f5f5f;
            }
— пкачхия
источник
-1

Даже если это старый вопрос, я хотел бы поделиться своим решением этой проблемы.

<div class="table">
    <div class="row">
        <div class="cell">Cell</div>
        <div class="cell">Cell</div>
    </div>
    <div class="row">
        <div class="cell colspan">
            <div class="spanned-content">Cell</div>
        </div>
    </div>
</div>

<style>
    .table {
        display: table;
    }
    .row {
        display: table-row;
    }
    .cell {
        display: table-cell;
    }
    .colspan:after {
        /* What to do here? */
        content: "c";
        display: inline;
        visibility: hidden;
    }
    .spanned-content {
        position: absolute;
    }
</style>

Вот скрипка . На самом деле это не промежуток времени, и решение немного взломано, но в некоторых ситуациях оно полезно. Протестировано в Chrome 46, Firefox 31 и IE 11.

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

— Габриэль
источник
Конечно, вы всегда можете положиться на сеточное решение, такое как Bootstrap. В этом конкретном случае мне действительно нужна автоматическая ширина, которая предлагает display: table.
— Габриэль
Кроме того, если вы хотите придать составному содержимому некоторый фоновый цвет, вам нужно будет заполнить свой tr полным количеством tds :(
— Габриэль
Я закончил тем, что сделал таблицу и переопределил свою концепцию «табличных данных» ^^
— Габриэль
-2

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

<div class="table">
  <div class="row">
    <div class="cell">
      <div class="table">
        <div class="row">
          <div class="cell">Cell</div>
          <div class="cell">Cell</div>
        </div>
      </div>
    </div>
  </div>

  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>

Или используйте 2 таблицы, в которых диапазон столбцов охватывает всю строку ...

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
    <div class="cell">Cell</div>
  </div>
</div>

<div class="table">
  <div class="row">
    <div class="cell">Cell</div>
  </div>
</div>
— Генри Джордж
источник
2
Вопрос был в том, как это сделать с помощью CSS.
— Энно Грёпер 08
4
Мне очень жаль, но это звучит как очень плохая идея.
— Призрак Мадары
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.