外table连续htmlcss

Question

我有一个 table 可以在附图中看到。最后一列包含按钮，如果我可以将它们放置在 table 之外但逻辑上位于同一行中，那就更好了。请建议通过 bootstrap 或 css.

执行此操作的方法

Answer 1

以 th 和 td 元素设置了边框而不是 table 的简单情况为例，我们可以实现以下结果：

删除 table 中第 last-of-type 个和第 td 个元素的边框。

如果 table 本身或行有边框，则这些需要设置为边框：none.

table 需要将其边框设置为折叠。

table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid gray;
  padding: 5px;
}

th:last-of-type, td:last-of-type {
  border: none;
}

th {
  font-weight: 600;
}

<table>
  <tr>
    <th>One</th>
    <th>Two</th>
    <th></th>
  </tr>
  <tr>
    <td><input /></td>
    <td><input /></td>
    <td>DEL</td>
  </tr>
</table>

Answer 2

您可以通过将 table 和 td 元素的属性 border-collapse 设置为 collapse，然后重新设置 td 元素的边框来实现此目的。之后你只需要在 td:last-child 上设置 border: 0。看this JSFiddle我做的挺快的

外table连续htmlcss

Outside table in a row html css

html

css

html-table

bootstrap-4