Question

我正在创建一个表，该表以后在单击导入的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

Answer 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 （左上，右上，右下，左下）

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/

Answer 2

您有在上面放置边框的CSS。删除边框1px纯黑色。我希望我回答正确了

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

} th，td { 填充：5px；文字对齐：左； }

有没有一种方法可以创建没有网格线的表？

2 个答案:

更新：