清除响应表中的 colspan

Posted 2023-03-05

【中文标题】清除响应表中的 colspan

【英文标题】：Clear colspan in responsive table

【发布时间】：2013-01-20 10:44:46

【问题描述】：

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

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

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

Demo

【问题讨论】：

代码运行良好。但是第一个td 的宽度比其他的最大。 colspan="4" 选择前 4 个 tds（姓名，1, 2, 3），第二个 colspan 选择其他 4 个 tds（4, 5, 6, 7）。

【参考方案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/

【讨论】：

您好 Enve，感谢您确认没有其他方法。可能会寻求您的解决方案，猜猜这是最好的解决方案。谢谢