gpt4 book ai didi

html - Colspan + 删除多列后单元格宽度相等

转载 作者:搜寻专家 更新时间:2023-10-31 19:27:28 26 4
gpt4 key购买 nike

附言。如果可能的话,我更喜欢用 CSS 来解决这个问题,但如果没有办法,我也可以访问 JQuery(但没有其他库)。

好的,这是 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>

最佳答案

编辑 1:没有阅读之前链接的问题。
编辑 2:我修好了,现在应该可以正常工作了。

我试着稍微调整了一下,我想我得到了想要的结果。现在您需要自定义 td 大小。

Jsfiddle

关于html - Colspan + 删除多列后单元格宽度相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/9126565/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com