清除响应表中的 colspan

Question

我有一个响应式表格（在可变 div 宽度内设置为 100% 宽度），我试图在其中“重置”colspan，以便下一个表格行不会继承固定宽度 tds。

在我的示例中，数字 td（1 到 7）具有 40 像素的固定宽度，由“位置”类给出。下一个表格行有两个按钮，每个按钮应该是 50%。我可以通过在示例中添加半类来做到这一点，但这会撤消“位置”类的宽度。因为我有 8 个 td，所以我给每个按钮的 colspan 为 4，但最后一个按钮 td 继承了 4 个“位置”类的宽度，所以它设置为 160px 固定.. 是否可以清除 colspan 和固定宽度呢？

数字可能取决于 (1-7)，因此添加具有相同数字的 colspan 不是一个好的解决方案。

Demo

Answer 1

正如我在评论中所说的

“代码运行良好。但第一个 td 的宽度比其他代码最大。colspan="4" 正在选择前 4 个 tds (name, 1, 2, 3)，第二个 colspan 正在选择其他 4 个tds (4, 5, 6, 7)。”

这不适用于td。如果你愿意，试试这个方法。

HTML

<tr>
    <td colspan="8">
        <div class="half"><a href="#" class="button">Button one<a/></div>
        <div class="half"><a href="#" class="button">Button two<a/></div>
    </td>
</tr>

CSS

.half{
    float: left;
    width: 50%;
}

演示：http://jsfiddle.net/enve/zt5W9/2/