我正在尝试在表格的网页中显示我的数据（来自elasticsearch）（理想情况下是显示数据表）。在表格中，每个ID /文档应有1行。但是，文档包含数组字段（列）。假设我有2个相关的列，并且该列中的每个数组都有5个元素，我希望5个元素中的每一个在2列上对齐，要考虑到在1列中是一个长文本，而在另一列中只有一个数。
参见以下示例：
id|col1 |col2
---------------------------
|-el1 |-long text over
1| | multiple rows
|-el2 |-text2
该数据可作为python字典列表使用，而col1的条目将再次成为列表。
如果可能的话，如何实现这一目标（理想情况下没有嵌套表）？
最佳答案
* {
margin: 0;
padding: 0;
}
table {
width: 80%;
}
th, td {
border: 1px solid #000;
}
td {
word-break: break-all;
text-align: center;
}
.number-td {
width: 20%
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table>
<tr>
<th>ID</th>
<th>Number</th>
<th>Text</th>
</tr>
<tr>
<td width="50">
1
</td>
<td class="number-td">
1
</td>
<td>
Text 1
</td>
</tr>
<tr>
<td width="50">
2
</td>
<td class="number-td">
2
</td>
<td>
Text 2
</td>
</tr>
<tr>
<td width="50">
3
</td>
<td class="number-td">
3
</td>
<td>
Text 3
</td>
</tr>
<tr>
<td width="50">
4
</td>
<td class="number-td">
4
</td>
<td>
Text 4
</td>
</tr>
<tr>
<td width="50">
5
</td>
<td class="number-td">
5
</td>
<td>
Text 5
</td>
</tr>
</table>
</body>
</html>我在ID列和数字列上保持width =“ 50”，在宽度上保持20％。您可以保留两者，也可以根据需要自定义！希望解决方案对您有帮助
关于css - HTML/CSS表:在列上对齐“子行”，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/56947948/