Colspan/Rowspan для элементов, для отображения которых задано значение table-cell

у меня есть следующий код:



<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?

519   13  

13 ответов:

насколько я знаю, отсутствие colspan/rowspan является лишь одним из ограничений display:table. Смотрите этот пост:

http://www.onenaught.com/posts/201/use-css-displaytable-for-layout

42  
2012-02-14 15:31:24

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

пример равен

с двумя ячейками в строке и двумя строками, где ячейка во второй строке является 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>

Live action (demo) здесь.

изменить: Я настроил код, чтобы он был более удобным для принтера,поскольку по умолчанию они оставляют цвета фона. Я тоже создал rowspan-demo, вдохновленный поздним ответом здесь.

24  
2017-09-28 20:32:07

более простое решение, которое работает для меня в 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;
}

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

14  
2013-10-30 02:15:46

просто использовать table.

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

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

смотрите мой ответ этот вопрос дополнительные сведения:

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

7  
2017-05-23 14:47:19

Если вы ищете прямой способ 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>
5  
2017-09-28 21:12:03

вот один из способов охвата столбцов в 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>
3  
2017-11-30 22:43:49

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

.table {
    display: table;
}
.row {
    display: table-row;
    position: relative;
}
.cell {
    display: table-cell;
}
.colspan2 {
    position: absolute;
    width: 100%;
}
1  
2015-10-05 00:32:25

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  
2016-08-16 11:03:43

используя соответствующие классы 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>

***Это не гламурно, но это работает для тех, кто ищет этот тип форматирования, и они хотят, чтобы избежать таблиц. Если это для макета данных, таблицы все еще работают в HTML5.

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

0  
2015-09-02 23:40:15

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

насколько мне известно, этот вопрос будет охватываться таблицы CSS, спецификация, которая в настоящее время находится в состоянии "незавершенное производство".

0  
2016-10-18 19:11:53

вы можете попробовать это решение, где вы можете найти, как применить 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;
            }
0  
2017-08-09 08:57:02

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

<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  
2013-01-08 11:10:12

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

<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.

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

-2  
2016-03-22 17:08:00

Comments

    Ничего не найдено.
Click here to cancel reply.