Colspan +删除多个柱子后的相等单元格宽度

PS。如果可能的话，我宁愿用CSS解决这个问题，但如果没有办法，我也可以访问JQuery（但没有其他库）。Colspan +删除多个柱子后的相等单元格宽度

好的，这是my previous question的扩展。当我问这个问题时，我试图让场景尽可能简单。但似乎我的表中的colspans正在创建一个问题。我有一个8列的表。在运行时，任何数量的这些元素都被删除。在我的表格中有几行colspan="8"。使用table-layout:fixed;我使单元具有相同的宽度。问题是与colspan="8"没有调整大小的单元格。图为我想我有什么，什么：

enter image description here

这里是代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<style type="text/css"> 
table{ 
    width:600px; 
    table-layout:fixed; 
} 
table td{ 
    border:1px solid red; 
    text-align:center; 
    background-color:#9CF; 
} 
table td:only-child{ 
    background-color:#CCFFFF; 
} 
caption{ 
    color:blue; 
    font-size:80%; 
} 
</style> 
<title></title> 
</head> 
<body> 
<table> 
    <caption>Original table</caption> 
    <tr> 
     <td colspan="8">Cell with colspan=8</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>After some columns are removed</caption> 
    <tr> 
     <td colspan="8">Cell with colspan=8</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>4</td> 
     <td>5</td> 
     <td>7</td> 
     <td>8</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width</caption> 
    <tr> 
     <td colspan="8">Cell with colspan=8</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Two</td> 
     <td>Three</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
<table> 
    <caption>I want these to have the same width, too</caption> 
    <tr> 
     <td colspan="8">Cell with colspan=8</td> 
    </tr> 
    <tr> 
     <td>1</td> 
     <td>Column number four</td> 
     <td>5</td> 
    <tr> 
</table> 
</body> 
</html>

来源

2012-02-03 AlexStack

如何删除列？你可以在删除它们时不更改colspan值来匹配列的数量吗？ – Deadlykipper 2012-02-03 09:49:58

根据使用Ajax接收的一些数据，它们在运行时使用一行JQuery移动。有可能使用JQuery来设置所有拥有它的单元格的“colspan”属性，但如果可能的话，我更喜欢CSS解决方案。 – AlexStack 2012-02-03 10:04:21

没有相当于'colspan =“8”'的CSS，所以你可以停止看。使用Javascript。 – 2012-02-03 10:26:26

编辑1：没看过以前的链接的问题。
编辑2：我修好了，它现在应该工作好了。

我试图调整它，我想我得到了预期的结果。现在您需要自定义td大小。

Jsfiddle

来源

2012-02-03 10:34:04 Vannen

您在这里依靠浏览器的错误更正。表行中有不同数量的列没有定义。不同的浏览器可能会做不同的事情，或者这可能会在不同的场景中崩溃。 **只有**适当的方法来做到这一点是用JavaScript来改变'colspan'。 – RoToRa 2012-02-03 14:08:47

我不知道他所依赖的是什么，但他的解决方案可以在FireFox，Opera，Internet Explorer和Chrome中使用。 – AlexStack 2012-02-03 15:24:37

它不起作用！你很幸运，它看起来像你的情况。想象一下，一位工匠用锤子将一颗螺丝敲入一块木头中。这可能会工作并持续一段时间，但很有可能会打破一段时间。你会相信这样做的工匠吗？ – RoToRa 2012-02-05 12:29:10

Colspan +删除多个柱子后的相等单元格宽度

回答

相关问题