Colspan +删除多个列后的单元格宽度相等 [英] Colspan + Equal cell width after multiple columns are removed
问题描述
PS。我喜欢用CSS解决这个问题，如果可能，但如果没有办法，我也可以访问JQuery（但没有其他库）。
OK ，这是
PS. I prefer to solve this problem with CSS if possible but if there is no way, I also have access to JQuery (but no other library).
OK, this is an extension of my previous question. When I was asking that question, I tried to make the scenario as simple as possible. But it seems the colspans in my table are creating a problem. I have a table with 8 columns. At runtime, any number of these elements are removed. There are a few rows with colspan="8" in my table. Using table-layout:fixed; I make the cells have equal width. The problem is the cell with colspan="8" doesn't resize. This picture shows what I have and what I want:
And here is the code:
<!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>
EDIT 1: Didn't read the previous linked question.
EDIT 2: I fixed it, it should be working okay now.
I tried to tweak it a bit and I think I got the desired outcome. Now you need to customize the td size.
这篇关于Colspan +删除多个列后的单元格宽度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
