Geek asks and answers

What is the analogue of colspan when using display: table; in CSS?

The task is rather strange. I need to create an html table BUT I am not allowed to use the traditional tag <table>. My table should look like this:enter image description here

It would be easy to do this as shown below:

<table>
     <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
     </tr>
     <tr>
         <td colspan="5"></td>
     </tr>
     ...

but, as I said, I'm not allowed to use the traditional table tags ( table, tr, td, th). Here's the JSFIddle of what I have at the moment. How can I get the same result as with <td colspan="5"></td> , but using only divs and CSS.

:
* , , () ( ).
* . . "colspanned" .

+5
6

CSS 2.1 "17.5 "

. ( CSS 2.1 , ...

! css , html-. , , "17.2.1 " :

... , , "" . , , 'table'/'inline-table', 'table-row' 'table-cell',...

, ( - div), :

CSS

.row {
    display: table;
    width: 100%;
}
.cell {
    display: table-cell;
    width: 16.67%;
}
.wideCell {
    display: table-cell;
}

HTML

<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
<div>One Two Three Four Five Six</div>
<div class="row">
    <div class="cell">One</div>
    <div class="cell">Two</div>
    <div class="cell">Three</div>
    <div class="cell">Four</div>
    <div class="cell">Five</div>
    <div class="wideCell">Six</div>
</div>
+4

CSS

.table{
        width: 100%;
    }
    .table .row{
        width: 100%;
        height: 25px;
        margin: 0px;
        padding: 0px;
    }
    .table .row .cell{
        width: 150px;
        float: left;
        border: solid 1px #CCC;
        height: 25px;
    }
    .table .clear_float{
        clear: both;
    }
    .table .row .cell.rowspan{
        width: 759px;
        border: solid 1px #CCC;
    }

HTML

<div class="table">
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell">One</div>
        <div class="cell">Two</div>
        <div class="cell">Three</div>
        <div class="cell">Four</div>
        <div class="cell">Five</div>
    </div>
    <div class="clear_float" />
    <div class="row">
        <div class="cell rowspan">
            One Two Three Four Five
        </div>
    </div>
</div>
+1

CSS float width, , , . , 5 divs . wideCell width .wrapper, .

HTML

<div class="wrapper">
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="wideCell"></div>
</div>

CSS

.wrapper {
    width:510px;
}
.cell {
    width:100px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}
.wideCell {
    width:508px;
    height:50px;
    background-color:#ff0000;
    float:left;
    border:1px #000 solid;
}

DEMO

+1

, , , html

CSS

div.table {border: 1px solid black; display: table; }
div.tr {border: 1px solid black; display: table-row; }
div.td {border: 1px solid black; display: table-cell; }

Html

<div class="table">
<div class="tr">
<div class="td">Row 1, Cell 1</div>
<div class="td">Row 1, Cell 2</div>
<div class="td">Row 1, Cell 3</div>
</div>
<div class="tr">
<div class="td">Row 2, Cell 1</div>
<div class="td">Row 2, Cell 2</div>
<div class="td">Row 2, Cell 3</div>
</div>

0

, colspan: table CSS. : CSS:

 <div style="display:table;">
     <div style="display:table-row;">
         <span style="display:table-cell;">Name</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">E-Mail</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
     <div style="display:table-row;">
         <span style="display:table-cell;">Password</span>
         <span style="display:table-cell;"><input type="text"/></span>
     </div>
 </div>

 <div style="display:table;">
     <div style="display:table-row; " >
         <span style="display:table-cell;">
             <button>Send Message</button>
         </span>
     </div>                            
  </div>
0

( data-x : xxxx ):

<!-- TH -->
<div data-tr>
    <div data-th style="width:25%">TH</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
                 <div data-th style="width:25%">TH</div>
             </div>
         </div>

    </div>
    <div data-th style="width:25%">TH</div>
</div>


<!-- TD -->
<div data-tr>
    <div data-td style="width:25%">TD</div>
    <div data-th style="width:50%">

         <div data-table style="width:100%">
             <div data-tr>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
                 <div data-td style="width:25%">TD</div>
             </div>
             <div data-tr>
                 ...
             </div>
         </div>

    </div>
    <div data-td style="width:25%">TD</div>
</div>
0
source

More articles:


All Articles