外表连续html css

Posted 2023-03-05

【中文标题】外表连续html css

【英文标题】：Outside table in a row html css

【发布时间】：2021-07-01 00:56:43

【问题描述】：

我有一张桌子，可以在附图中看到。最后一列包含按钮，如果我可以将它们放置在表格之外但逻辑上在同一行中，那会更好。请建议一种通过引导程序或 css 执行此操作的方法。

【问题讨论】：

您能否在您的问题中向我们展示您的代码的一个简单示例 - 也许是一个带有标题和几行以及任何相关 CSS 的表格 - 最好将其变成一个有效的 sn-p .. 它是如果我们有显示问题的初始代码，则更容易提供帮助，请参阅 [link]***.com/help/minimal-reproducible-example

【参考方案1】：

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

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

如果表格本身或行有边框，则需要将它们设置为边框：无。

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

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>

【讨论】：

我同意这个解决方案。

【参考方案2】：

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