7

这个任务很奇怪。我必须创建 html 表，但我不允许使用传统<table>标签。我的表应该是这样的：在此处输入图像描述

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

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

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

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

4

6 回答 6

4

如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>
于 2013-07-18T11:04:56.210 回答
1

编辑

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>
于 2013-03-19T10:20:18.127 回答
1

您需要使用 CSSfloat并width获得您正在寻找的类似表格的效果。我基本上在做的是我将 5divs全部放置一个固定宽度和类名，并将它们浮动到左边。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;
}

演示

于 2013-03-19T10:24:37.080 回答
0

我搜索了很多，在 display:table CSS 中没有像 colspan 这样的东西。你可以试试这个：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>
于 2013-10-02T14:24:21.140 回答
0

您可以这样做（其中 data-x 具有适当的 display: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>
于 2014-08-13T23:54:22.207 回答
-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>

于 2013-04-03T20:01:47.773 回答