表 colspan 修复答案

【问题标题】：Table colspan fix表 colspan 修复
【发布时间】：2014-07-21 17:06:08
【问题描述】：

这里有两个codepen。在它们中的每一个中，您都会注意到一个绿色区域。其中一个是通过表格完成的，而另一个则使用了 div。当您调整窗口大小时，还要注意该行为。

表格代码笔:http://codepen.io/anon/pen/Kmdca?editors=110和div代码笔:http://codepen.io/anon/pen/tDhIG?editors=110 所以竞争的部分是：

表格代码笔：

<table class="information_table">
<tr><td></td><td></td><td></td><td></td></tr>
    <tr>
    <td colspan="2"><span class="prodinfo_title">Auteur: </span>Onbekend</td>
    <td><span class="prodinfo_title">Formaat: </span>37 x 23 cm</td>
    <td><span class="prodinfo_title">Prijs: </span>1900</td>
    </tr>
    <tr>
    <td colspan="2"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</td>
    <td><span class="prodinfo_title">Jaar v. uitgave: </span>1646</td>
    <td><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</td>    
    </tr>
    </table>

对比

div codepen：

<div class="info_box">
  <div class="row">
    <div class="column big"><span class="prodinfo_title">Auteur: </span>Onbekend</div>
    <div class="column"><span class="prodinfo_title">Formaat: </span>37 x 23 cm</div>
    <div class="column"><span class="prodinfo_title">Prijs: </span>1900</div>
  </div>
  <div class="row">
    <div class="column big"><span class="prodinfo_title">Uitgever: </span>Pieter Jacob Paets Jan Moerentorf</div>
    <div class="column"><span class="prodinfo_title">Jaar v. uitgave: </span>1646</div>
    <div class="column"><span class="prodinfo_title">Aantal pg: </span>4 + 1265 +1 +468</div>
  </div>         
</div>

我想要实现的是

表codepen中所示的绿色区域被分成4等份，其中第一列存在2份。两者都没有真正解决这个问题，因为 table codepen 没有使用完整的可用空间，并且 div codepen 不会自动正确划分空间。
2 个绿色区域中的红色文本与 div 代码笔 处于最大宽度时位于同一水平位置（此行为除非是小尺寸，其中 1 个框跳下浮动）
当调整大小时，所有信息在浮动 div 下作为一个整体跳转，就像在 table codepen 中一样。 div codepen 无法正确执行此操作。另外 1 行必须保持 1 行，div codepen 也无法做到这一点
一行中的红色文本处于相同的垂直高度。 div codepen 不这样做

所以目前 table codepen 表现最好，除了不同 tables 中红色文本的水平对齐和可选地使用可用空间。

【问题讨论】：

在基于 DIV 的布局中将 white-space:nowrap 添加到 .column 类中，以使其更好地工作。
@Diodeus ：这会导致单词相互交叉！
可用空间问题可以通过在 .information_table 中添加计算宽度来修复 table codepen：width:calc(100%-100px)（100px 是 product_float 宽度的 90px + 边距 10px）

标签： html css html-table

【解决方案1】：

最终的解决方案来自 csstricks：http://css-tricks.com/forums/topic/colspan-problem/page/2/。由于语义错误，我们删除了表，并设法通过列表获得了预期的效果： http://codepen.io/wolfcry911/pen/mJsrp

HTML

<ul>
     <li><h4>Auteur:</h4>Amelotto Della Houssaia</li>
     <li><h4>Formaat:</h4>/</li>
     <li><h4>Prijs:</h4>200</li>
     <li><h4>Uitgever:</h4>Pietro Del Martello</li>
     <li><h4>Jaar v. uitgave:</h4>0</li>
     <li><h4>Aantal pg:</h4>246+242</li>
</ul>

CSS

ul {
 margin: 10px 0 10px 100px;
 padding: 0;
 background: #6C9;
 overflow: hidden;
 position: relative;
 font-size: 0.8em;
 list-style: none;
  }

li {
 float: left;
 width: 25%;
 padding: 4px;
 box-sizing: border-box;
}

li h4 {
 color: #b02a0a;
 float: left;
 margin: 0 4px 0 0;
}

li:nth-child(3n+1) {
 width: 50%;
 clear: left;
}

【讨论】：