时间戳

首页 > 解决方案 > HTML/CSS 表：在列上对齐“子行”

css - HTML/CSS 表：在列上对齐“子行”

问题描述

我正在尝试在表格的网页中显示我的数据（来自elasticsearch）（理想情况下最后使用数据表）。在表格中，每个 id / 文档应该有 1 行。但是，该文档包含数组字段（列）。假设我有 2 列是相关的，并且列中的每个数组都有 5 个元素，我希望 5 个元素中的每一个都在 2 列上对齐，考虑到在 1 列中它是一个长文本，而在另一列中只是一个数字。

请参阅下面的示例：

id|col1   |col2
---------------------------
  |-el1   |-long text over
 1|       | multiple rows
  |-el2   |-text2

数据作为 python dicts 列表可用，col1 的条目将再次成为列表。

如果可能的话，我怎样才能实现这一点（理想情况下没有嵌套表）？

标签： csshtml-table

解决方案

* {
  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 列和数字列上保持宽度 =“50”，我保持宽度：20%。您可以保留两者或根据需要自定义！希望解决方案对您有所帮助

推荐阅读