在td的所有边使用不同的边框

Question

是否可以使用css3在table, tr, td上应用边框，因此它看起来像手工绘制类似于：

---

目前，我正在尝试以下但是会导致tds：

之间的空间

table{
  border-collapse: collapse;
  }
td{
  background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
  background-size: 100% 100%;
  padding: 20px;
  }

<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  </table>

那么，有没有办法可以在tds的右上角和左上角使用不同的边框？

Answer 1

你可以通过精心制作一个没有边框或背景的桌子（所以它是透明的）并使用手绘图形作为背景来做到这一点。

如果您将背景设计为重复（无缝），那么您的表格甚至可以是动态的。

table {
    background: url(http://i.stack.imgur.com/idN4k.jpg) -10px -15px repeat;
}
table td {
    padding: 20px 10px;
}

<table>
  <tr>
    <td width="37">one</td>
    <td width="42">two</td>
    <td width="42">three</td>
    <td width="42">four</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    <td>four</td>
  </tr>
</table>

http://jsfiddle.net/nhur0uu0/

这也可以通过自定义svg实现，但我想在推荐之前了解更多关于你的用途。

Answer 2

您可以使用border-images实现类似的功能，并在行和列上使用:nth-child选择器的每个第N个单元格中应用不同的边框图像，可能会使用一些素数来隐藏重复。

这将需要border-collapse:separate个表，因此您还需要零边距。

图像必须在角落处正确排列，因此线条不能像示例中那样弯曲

Answer 3

您可以尝试设置负边距，就像我在这里一样。

table {
    border-collapse: collapse;
}
td {
    background: url(http://i.stack.imgur.com/ojaEj.png) no-repeat;
    background-size: 100% 100%;
    padding: 20px;
    margin: -9px -8px;
    display: inline-block;
}
tr {
    display: block;
}
tr:nth-child(2) {
    margin-left:4px;
}
tr:nth-child(3) {
    margin-left:8px;
}

<table>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  <tr>
    <td>one</td>
    <td>two</td>
    <td>three</td>
    </tr>
  </table>

不太漂亮，但确实有效。