DIV 表 colspan：怎么样？答案

【解决方案1】：

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

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

【讨论】：

视觉效果很容易实现，你不需要设置任何类型的colspan。请参阅下面的尼克祖鲁的回答。您甚至不需要两个不同的模拟表。同一个 mock-table 中的两个 mock-rows 可以包含不同类的 mock-td。
@mattblang 它仍然处于“正在进行中”状态。这是 CSS 表的draft specification。

【解决方案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>

效果很好！

【讨论】：

它不仅可以工作，您甚至不必制作两个模拟表。如果这是你想要的，一切都是一样的。
这似乎只有在所有 div 都设置了明确的宽度时才有效，这违背了display:table 的目的。

【解决方案3】：

所以基本上，您已将所有<table>、<tr> 和<td> 元素转换为<div> 元素，并设置它们的样式以使其与它们替换的原始表格元素完全相同？

这有什么意义？

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

关于在现代网站中不使用表格这一点的真正含义是在不使用涉及设置表格单元格网格的那种布局技术的情况下实现您想要的页面布局。

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

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

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

如果您的页面布局依赖于表格，那么在不重新设计布局的方式的情况下，做半途而废以摆脱表格元素确实没有任何意义。它什么也做不了。

希望对您有所帮助。

【讨论】：

关键是元素的语义和呈现方式是不同的。如果 CSS 规范已经达到了一个阶段，它表达了与表格标记所暗示的表示相关的所有内容，并且浏览器已经赶上了，那么这将是一个很好的方式来获得表格布局的好处（调整按照指定的粘在一起的元素的大小）边缘），没有语义上的缺点（完全是关于数据含义的谎言）。
@Spudley - 尽管在大多数情况下使用更适合表格表示，但在某些情况下我遇到了 CSS 方式似乎更合适的情况。例如 - 如果您有多个但外观相似的表格，您希望以漂亮的表格方式显示，则无法单独使用表格来实现，因为只有一个表格可以包裹在一张表格周围。您可以有多个表格 - 每个表格一个，但如果没有一些 CSS 调整，它们看起来不会那么整洁，而 CSS/DIV 方式实际上是在这些情况下更好的方式。

此外，与“HTML 表格”不同，“CSS 表格”可能具有“隐含”元素。也就是说，您可以只添加一个 display: table-cell; 元素，而无需围绕行和表，它的格式会很好。

我完全同意这个答案，但遗憾的是，我相信几乎没有不使用表格就无法实现的布局。也许我错了（我不是 HTML/CSS 专家）但有时真的很难得到我脑海中的布局。例如，您可以在此处阅读我的答案 > stackoverflow.com/questions/20018742/…。您会认为您可以使用 100% 高度或固定位置或绝对位置+top:0;bottom:0; 来设置该布局。但是尝试一下，我认为没有表格（或显示：表格）可能是不可能的

我喜欢桌子。不幸的是，Google 的 RWD 指令已经破坏了它们的实用性（有利于能够动态响应任意屏幕尺寸的网站的新需求）。因此，我（有必要）将表格从我的网页设计中逐步淘汰，转而支持
，通过加载适合屏幕大小的样式表可以以不同方式显示。所以我目前正在研究在
标签上需要这个“colspan=2”属性的完美理由，而缺少它是非常令人沮丧的！

【解决方案4】：

尝试在无表设计中思考并不意味着你不能使用表:)

只是你可以想到表格数据可以在表格中呈现，而其他元素（主要是 div 的）用于创建页面的布局。

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

祝你好运；）

【讨论】：

【解决方案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>

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案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>

【讨论】：

“colspan”行会导致其上方的第一个单元格展开。 jsfiddle.net/EGx2H/159

【解决方案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 问题，但它确实满足了我的时间需求。

【讨论】：

【解决方案9】：

您只需在 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>

【讨论】：

【解决方案10】：

您可以使用 Normal TR、TD 并在 td 中使用 colspan，它可以作为 hack。

【讨论】：

【解决方案11】：

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

【讨论】：

data-td 怎样才能有合适的显示集？这与我见过的任何 html 用法都不匹配，您确定没有涉及 javascript 库吗？
对我来说看起来很像一些工具用法，例如引导程序或角度等。