Javascript 带曲线链接标题的HTML表格

我正在尝试实现这种类型的表，以便可以为列提供扩展标签。但我甚至不知道用搜索来描述它叫什么

编辑 我可以找到如何用CSS来填充html边框。但这无助于将行链接到列。我可以旋转列标题文本，但这不是我想要的

我能想到的最贴切的东西是一张满桌的桌子，上面有边框或背景色来突出两者之间的联系，但这张桌子应该是方形的，而不是圆形的

---

我想知道是否有一种方法可以通过css实现这一点。或者是一个做同样事情的库。

？？？使用id或数字+图例 1 2 3 左中右 L M R 或者，如果您创建图像，可能会更好

但是，您仍然可以在表行中使用边界半径+位置。如您所愿，它可能无法跨浏览器工作。

---

在站点的黑色输入框中输入40，例如，我从未听说过类似的事情。一般来说，假设链接是表tr/td的正常部分，则不能对任何这样的元素进行曲线化

我在这里创建了一些小东西，制作曲线，你可以将它添加到你的桌子上，以产生那种感觉，但是请注意，你不能在它里面写字，而且最重要的是，它不会工作，因为它在浏览器中看起来不精确，在其他项目上测试过缩放效果，我还需要一些带圆圈的东西

所以你最好用另一种方式来设计你的桌子

不管怎么说，这里有一个片段，里面有四舍五入的链接

.circ、.circ2、.circ3{ 位置：绝对位置； 边界半径：50%； 显示：内联块； 背景色：透明； 边框顶部：1件纯黑； 左边框：1px实心透明； 右边框：1px实心透明； 边框底部：1px实心透明； 变换：旋转45度； } .circ{宽度：180px； 高度：180px；顶部：0；左侧：0；} .circ2{宽度：135px； 高度：135px；顶部：23px；左侧：22px} .circ3{宽度：80px； 高度：80px；顶部：50px；左侧：50px；} .container{位置：绝对；顶部：20px；左侧：20px；边框：1px点黑色；宽度：200px；高度：200px；}

---

这是一个非常接近你想要的模型

我在SCSS中写了一部分，因为这对我来说更容易，这里的代码片段是它的编译版本

保险商实验室{ 列表样式：无； 填充：0； 宽度：400px； 浮动：左； } ul li:nth-child1{ 背景颜色：蓝色； } ul li:nth-child2{ 背景颜色：绿色； } ul li:n-child3{ 背景色：红色； } .clearfix:之后{ 显示：块； 内容：； 明确：两者皆有； } .圆边{ 浮动：左； 宽度：80px； 背景颜色：灰色； 高度：70像素； 边缘顶部：15px； 边界半径：0 50px 0 0； 位置：相对位置； } .圆边{ 背景颜色：蓝色； 高度：70像素； 宽度：75px； 边界半径：0 50px 0 0； } .圆边{ 背景颜色：绿色； 高度：50px； 宽度：50px； 位置：绝对位置； 底部：0； 左：0； 边界半径：0 25px 0 0； } .圆边{ 背景色：红色； 高度：33像素； 宽度：25px； 位置：绝对位置； 底部：0； 左：0； 边界半径：0 20px 0 0； } tr td:nth-child1{ 宽度：400px； } tr td:nth-child2{ 背景色：红色； 宽度：20px； 文本对齐：居中； } tr td:nth-child3{ 背景颜色：绿色； 宽度：20px； 文本对齐：居中； } tr td:nth-child4{ 背景颜色：蓝色； 宽度：20px； 文本对齐：居中； } 最后一列 中柱 第一列 某物 X X X 还有别的事 X X X 完全不同的东西 X X X 福 X X X

---

看起来不错，但如何将其与表格和单元格对齐？这正是我要说的。。。它需要大量的定位工作，你必须首先做出曲线，所以你必须找到正确的尺寸和定位。然后你把曲线所在的整个div放在桌子上。。。但正如我所说的，这些是边界，它们在不同的浏览器中绘制的结果会有所不同，所以你可能永远不会在任何地方都得到好的结果。此外，如果你缩放页面，if会很容易变得凌乱。因此，我的建议仍保留在帖子中。用不同的方式设计你的桌子。很好，这基本上回答了问题。谢谢。花点时间看一下代码，然后投否决票——但不花点时间写下答案有什么问题？