行中的外部表格html css

Question

我有一个表，可以在附加的图像中看到。最后一列包含按钮，如果我能把它们放在表外，但逻辑上在同一行，那就更好了。请建议一种通过bootstrap或css来完成此操作的方法。

​

​

Answer 1

以th和td元素设置了边框但没有设置表格的简单情况为例，我们可以获得以下结果：

​

通过删除表中last-of-type、th和td元素的边框。

如果表本身或行有边框，则需要将这些边框设置为border: none。

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

​

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。