有没有办法创建没有网格线的表格？答案

【问题标题】：Is there a way to create a table without grid-lines?有没有办法创建没有网格线的表格？
【发布时间】：2019-11-06 16:04:43
【问题描述】：

我正在创建一个表，稍后单击我导入的 sql 表中的链接时，该表将用作弹出窗口。这篇文章附上了表格的例子，以供综合考虑

我尝试过创建一个表格，并研究了如何创建一个像图片那样的表格

这就是我所做的：

<!DOCTYPE html>
<html>
<head>
<style>
    table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
  padding: 5px;
  text-align: left;
}
</style>
</head>
<body>


<table style="width:30%">
  <tr>
    <th>PT</th>
    <th>OT</th>
    <th>SLP</th>
    <th>NSG</th>
    <th>NTA</th>
  </tr>
  <tr>
    <td>15</td>
    <td>15</td>
    <td>2</td>
    <td>11</td>
    `<td>9</td>`
  </tr>

</table>

</body>
</html> </pre>

我希望输出与发布的图片中的输出相同

This is what I am trying to replicate

【问题讨论】：

table, th, td { none; }，也许吧？）

标签： html css bootstrap-4 bootstrap-modal

【解决方案1】：

默认情况下，表格没有网格线。以下是创建表格网格线的线：

<style>
    table, th, td {
    border: 1px solid black; /*  <<===== this one  */
    border-collapse: collapse;
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

改成：

<style>
    table, th, td {
    border-collapse: collapse; /*  You can keep this line or not, optional */
    }
    th, td {
      padding: 5px;
      text-align: left;
    }
</style>

更新：

要在评论中回答您的问题，我会使用两个表格并在它们周围放置一个 DIV。然后，将边框放在 DIV 周围。如果您使 div 比表格宽一点，那么您可以在其中添加另一个 DIV 并将其定位为绝对值，从顶部/右侧开始。

请注意，为了在内部 div 上使用 position:absolute，父 div 必须不是默认的 position:static - 所以我推荐position:relative，因为它几乎与静态相同。

要圆角边框，请使用border-radius (top-left, top-right, bottom-right, bottom-left)

table{border-collapse: collapse;}
#tblDiv{position:relative;width:25vw;border:1px solid #aaa;border-radius:10px;}
th, td {
  width: 6vw;
  padding: .5vw;
  text-align: center;
}

#rbrdDiv{position:absolute;top:0;right:0;width:3vw;height:100%;border-radius: 0 10px 10px 0;background:blueviolet;}

<div id="tblDiv">
  <div id="rbrdDiv"></div>
  <table>
    <tr>
      <th>PT</th>
      <th>OT</th>
      <th>SLP</th>
    </tr>
    <tr>
      <td>15</td>
      <td>15</td>
      <td>2</td>
    </tr>
  </table>
  <table>
    <tr>
      <th>NSG</th>
      <th>NTA</th>
    </tr>
    <tr>
      <td>11</td>
      <td>9</td>
    </tr>
  </table>
</div>

您可以使用::before 伪选择器创建左箭头，我将其作为练习留给您。以下是有关如何执行此操作的一些参考。如果您不能在十分钟内完成，请发表另一条评论，我会提供帮助。

https://css-tricks.com/pseudo-element-roundup/

https://css-tricks.com/the-shapes-of-css/

参考资料：

https://css-tricks.com/almanac/properties/b/border-radius/

【讨论】：

如何添加类似于 picx 中显示的值？
你太棒了！！谢谢你。你是一个很好的资源！
#tiprbrdDiv:after { 边框颜色: rgba(0, 0, 0, 0);右边框颜色：#ffffff；边框宽度：25px；边距顶部：-37px； } #tiprbrdDiv::before { 边框颜色：rgba(194, 225, 245, 0);右边框颜色：#c2e1f5；边框宽度：36px；边距顶部：-36px；这没有显示箭头。我的问题是您是否建议创建一个包含 rbrdDiv id 的类，并将 ::after 应用于创建的 div。我也有其他关于创建两个箭头的想法，但这听起来很复杂。谢谢你的进步
纠结了一下...我的建议是接受这个问题的正确答案（关闭问题并奖励最有帮助的答案），并为此查询打开一个新问题。这样做始终是快速获得答案的最快、最方便的途径 - 并且还通过快速奖励答案来支持 SO 的基础模型。请记住，接受答案的成本为零（事实上，您也获得 2 个代表）和/或为有用的答案投票，并且回答的人对此表示赞赏，因此它使感觉。 Meilleurs voix！

【解决方案2】：

您有 CSS 将边框放在那里。去掉边框 1px 纯黑色。我希望我回答正确

<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;

} th, td { 填充：5px；文本对齐：左； }

【讨论】：