HTML表格 - 更改列中单个单元格的宽度 [英] HTML table - Change the width of a single cell in a column
问题描述
有没有更优雅的解决方案，以达到与此相同的效果？
Is there a more elegant solution to achieve the same effect as this?
到目前为止，我的代码是：
The code I've got so far is this:
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table { border-collapse: collapse; }
td { border: solid 1px; }
td.nest { padding: 0px; }
td.nest table td { border-width: 0px 1px; }
td.nest table td:first-child { border-left: none; }
td.nest table td:last-child { border-right: none; }
</style>
</head>
<body>
<table>
<colgroup>
<col style="width: 3em;"/>
<col style="width: 6em;"/>
<col style="width: 9em;"/>
</colgroup>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><!-- Somehow get rid of the nested table and keep just the tds -->
<td class="nest" colspan="3">
<table>
<tr>
<td style="width: 4em;">1</td>
<td style="width: 6em;">2</td>
<td style="width: 8em;">3</td>
</tr>
</table>
</td>
</tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
</table>
</body>
</html>
我可以得到这个工作到目前为止的唯一方法是在第一个嵌套另一个表。我不喜欢它，因为理想情况下我只想要一个表，并有很多额外的CSS匹配第一个表的边框，而不添加到单元格（ colspan =3）size。我想能够用只有一个< tr> 的三个< td> 替换嵌套表，
The only way I can get this working so far is to nest another table inside the first. I don't like it much because ideally I only want one table and there's a lot of extra CSS to match the borders of the first table without adding to the cell (colspan="3") size. I want to be able to replace the nested table with just a normal <tr> with three <td>s in it.
我发现改变一个单元格的宽度而不影响列中其他单元格的唯一方法是使用 position：absolute; ，但是行中的下一个单元格向左移动调整单元格的宽度，因此不能完全工作。
The only other way I've found to change the width of one cell without affecting the other cells in the column is with position: absolute; but then the next cell in the row is shifted to the left by the width of the adjusted cell, so that doesn't work fully. It's also too hard to get the widths just right.
所以，有没有办法只使用一个表获得相同的效果，没有额外的 < div> s等，只是简单的CSS？此示例应该只有一个< table> ，九个< td> s和 colspan = s。我正在寻找一个纯CSS解决方案（如果存在）。
So, is there any way to get the same effect using just one table, no extra <div>s, etc. and just simple CSS? This example should have only one <table>, nine <td>s and no colspan=s. I'm looking for a pure CSS solution if one exists. It should be able to cope with any arbitrary widths as long as they add up to the original width.
推荐答案
不，这是任何宽度都可以处理。不可能没有子表格。
你想做的是反对表格数据表示的想法。
如果你不想要一个表，不要使用一个表。
不过你可以把你的数据放到div中， code> style =display：table-cell;
No, this is not possible without subtables.
What you are trying to do is against the idea of tabular data presentation.
If you don't want a table, don't use a table.
You could however put your data into divs with style="display: table-cell;".
在第二个想法，你可以使用colspan在所有3行。
所以你的表实际上是这样：
On a second thought, you could use colspan in all 3 rows.
So your table actually looks like this:
< img src =https://i.stack.imgur.com/Xyj0g.pngalt =Colspan>
<col style="width: 3em;"/>
<col style="width: 1em;"/>
<col style="width: 5em;"/>
<col style="width: 1em;"/>
<col style="width: 8em;"/>
<!DOCTYPE html>
<html>
<head>
<title>Table Test</title>
<style type="text/css">
table {
border-collapse: collapse;
}
td {
border: solid 1px;
}
td.nest {
padding: 0px;
}
td.nest table td {
border-width: 0px 1px;
}
td.nest table td:first-child {
border-left: none;
}
td.nest table td:last-child {
border-right: none;
}
</style>
</head>
<body>
<table >
<colgroup>
<col style="width: 3em;" />
<col style="width: 1em;" />
<col style="width: 5em;" />
<col style="width: 1em;" />
<col style="width: 8em;" />
</colgroup>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
<td colspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td colspan="2">2</td>
<td colspan="2">3</td>
</tr>
</table>
</body>
</html>
这篇关于HTML表格 - 更改列中单个单元格的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
