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 来匹配第一个表格的边框而不增加单元格 ( 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 ( 我发现在不影响列中其他单元格的情况下更改一个单元格宽度的唯一另一种方法是使用 The only other way I've found to change the width of one cell without affecting the other cells in the column is with 那么，有没有什么方法可以只使用一张表格，而无需额外的 So, is there any way to get the same effect using just one table, no extra 不，没有子表这是不可能的. No, this is not possible without subtables. 这篇关于HTML 表格 - 更改列中单个单元格的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！colspan="3") 的大小.我希望能够用普通的 替换嵌套表，其中包含三个 .
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; 但随后该行中的下一个单元格移动到左边是调整后的单元格的宽度，所以不能完全工作.使宽度恰到好处也太难了.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> 等，只使用简单的 CSS 来获得相同的效果?这个例子应该只有一个 、九个
并且没有 colspan= .如果存在，我正在寻找一种纯 CSS 解决方案.它应该能够处理任何任意宽度，只要它们加起来等于原始宽度即可.
<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.推荐答案
您试图做的是反对表格数据呈现的想法.
如果你不想要一张桌子，就不要用一张桌子.
但是，您可以使用 style="display: table-cell;" 将数据放入 div.
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;".
再想一想，您可以在所有 3 行中使用 colspan.
所以你的表实际上是这样的:
On a second thought, you could use colspan in all 3 rows.
So your table actually looks like this: <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>
登录
关闭
