Question

如何在无表格（例如div.table {display: table;} div.tr {display: table-row;} etc.）表格中实现colspan / rowspan行为？

Answer 1

我想这会被CSS表所涵盖，这个规范虽然在CSS homepage中提到，但目前似乎处于“尚未以任何形式发布”的状态

实际上，你目前无法做到这一点。

Answer 2

你可以简单地使用两个表格div，例如：

<div style="display:table; width:450px; margin:0 auto; margin-top:30px; ">
  <div style="display:table-row">
    <div style="width:50%">element1</div>
    <div style="width:50%">element2</div>
  </div>
</div>
<div style="display:table; width:450px; margin:0 auto;">
  <div style="display:table-row">
    <div style="width:100%">element1</div>
  </div>
</div>

效果很好！

Answer 3

基本上，您已将所有<table>，<tr>和<td>元素转换为<div>元素，并将其设置为与原始表格元素完全相同已被取代？

有什么意义呢？

听起来有人告诉你，你不应该在现代网页设计中使用表格，这对有点是正确的，但不是这样 - 你所做的并不是实际上改变了你的代码。它当然没有摆脱桌子;它只是让它更难阅读。

关于不在现代网站中使用表格的观点的真正含义是实现您想要的页面布局，而不使用涉及设置表格单元网格的布局技术。

这可以通过使用position样式和float样式以及其他一些样式来实现，但肯定不是display:table-cell;等等。所有这些都可以在不需要colspans或rowpans的情况下实现

另一方面，如果您尝试在页面上放置一个实际的表格数据块 - 例如购物篮中的商品和价格列表，或者一组统计数据等，那么表格仍然是正确的解决方案。表格未从HTML中删除，因为它们仍然相关且仍然有用。关键是可以使用它们，但仅限于实际显示数据表的地方。

您的问题的简短回答是我认为您不能 - colspan和rowspan特定于表格。如果你想继续使用它们，你需要使用表格。

如果您的页面布局依赖于表格，那么在没有重新设计布局的方式的情况下，实际上没有任何一点可以去除表格元素。它没有取得任何成就。

希望有所帮助。

Answer 4

尝试用无表格设计并不意味着你不能使用表格。）

只有您可以认为表格数据可以在表格中显示，而其他元素（主要是div）用于创建页面布局。

所以我应该说你必须阅读有关div元素样式的一些信息，或者使用this page作为一个很好的示例页面！

祝你好运;）

Answer 5

你总是可以使用CSS来简单地调整你想要做colspan和rowspan的那些元素的宽度和高度，然后简单地省略显示重叠的DIV。例如：

<div class = 'td colspan3 rowspan5'> Some data </div>

<style>

 .td
 {
   display: table-cell;
 }

 .colspan3
 {
   width: 300px; /*3 times the standard cell width of 100px - colspan3 */
 }

 .rowspan5
 {
   height: 500px; /* 5 times the standard height of a cell - rowspan5 */
 }

</style>

Answer 6

为了从基于div的表格布局中获取“colspan”功能，您需要放弃使用display：table |显示：行样式。特别是在每个数据项跨越多行并且每行需要不同大小的“单元格”的情况下。

Answer 7

<div style="clear:both;"></div> - 在某些情况下可以做到这一点;不是“colspan”，但可能有助于实现你想要的......

<div id="table">
    <div class="table_row">
        <div class="table_cell1"></div>
        <div class="table_cell2"></div>
        <div class="table_cell3"></div>
    </div>
    <div class="table_row">
        <div class="table_cell1"></div>
        <div class="table_cell2"></div>
        <div class="table_cell3"></div>
    </div>

<!-- clear:both will clear any float direction to default, and
prevent the previously defined floats from affecting other elements -->
    <div style="clear:both;"></div>

    <div class="table_row">
<!-- the float is cleared, you could have 4 divs (columns) or
just one with 100% width -->
        <div class="table_cell123"></div>
    </div>
</div>

Answer 8

我通过将它们分开来实现这一点，例如：

<div class="table">
  <div class="row">
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
    <div class="col">TD</div>
  </div>
</div>
<div class="table">
  <div class="row">
    <div class="col">TD</div>
  </div>
</div>

或者您可以为每个表定义不同的类

<div class="table2">
  <div class="row2">
    <div class="col2">TD</div>
  </div>
</div>

从用户的角度来看，它们的行为相同。

当然，它并没有解决所有colspan / rowspan问题，但它确实满足了我对时间的需求。

Answer 9

column-span: all; /* W3C */
-webkit-column-span: all; /* Safari & Chrome */
-moz-column-span: all; /* Firefox */
-ms-column-span: all; /* Internet Explorer */
-o-column-span: all; /* Opera */

http://www.quackit.com/css/css3/properties/css_column-span.cfm

Answer 10

你只需在css中使用：nth-child（num）来添加colspan，如

 <style>
 div.table
  {
  display:table;
  width:100%;
  }
 div.table-row
  {
   display:table-row;
  }
 div.table-td
 {
  display:table-cell;
 }
 div.table-row:nth-child(1)
 {
  display:block;
 }
</style>
<div class="table>
    <div class="table-row">test</div>
    <div class="table-row">
      <div class="table-td">data1</div>
      <div class="table-td">data2</div>
    </div>
</div>

Answer 11

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

DIV表colspan：怎么样？

11 个答案: