Question

任务很奇怪。我必须创建html表但是我不允许使用传统的<table>标记。我的表应如下所示： enter image description here

这样做很容易，如下所示：

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

但是，正如我所说，我不允许使用传统的表格标签（table，tr，td，th）。这是我目前所拥有的JSFIddle。如何仅使用div和CSS获得与<td colspan="5"></td> 但相同的结果。

编辑：
*表格单元格在一行中的宽度不能固定，它应该是动态的，应该可以使它们（单元格）的宽度不同（在一行中）。
* 相同列的不同行中的表格单元格宽度必须相等。就像传统的桌子一样。只有“colspanned”单元格的宽度必须不同。

Answer 1

如部分"17.5 Visual layout of table contents"中的CSS 2.1规范中所述

单元格可能跨越多行或多列。（虽然CSS 2.1没有定义如何确定跨越的行数或列数......

所以他回答很简单！不要认为css表与html表完全相同。正如"17.2.1 Anonymous table objects"中提到的那些差异：

...必须假设“缺失”元素才能使表模型起作用。任何表元素都会自动生成必要的匿名表对象，包括至少三个对应于'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>

Answer 2

修改

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>

Answer 3

您需要使用CSS float和width来获得您正在寻找的类似于桌面的效果。我基本上在做的是我将5 divs全部放在固定的宽度和类名中，然后将它们浮动到左边。 wideCell具有相同的width .wrapper <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>，只是将它们保存在一个不错的块中。

<强> HTML

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

<强> CSS

{{1}}

DEMO

Answer 4

检查这个小提琴我希望这足以满足你的需要 html tables

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

Answer 5

我搜索了很多，没有像colspan那样显示：table CSS。您可以尝试：CSS display:table

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

Answer 6

你可以这样做（其中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>

使用display时，colspan的模拟是什么：table;在CSS？

6 个答案: