我如何在 css 中为矩阵自定义边框

Question

<table style="float:left;">
    <tr>
        <td><input id="c11" placeholder="c1,1" class="matr_c" readonly></td>
        <td><input id="c12" placeholder="c1,2" class="matr_c" readonly></td>
    </tr>
    <tr>
        <td><input id="c21" placeholder="c2,1" class="matr_c" readonly></td>
        <td><input id="c22" placeholder="c2,2" class="matr_c" readonly></td>
    </tr>
</table>

我在html和css中有一些矩阵的代码。现在看起来就像这张照片。 http://i.stack.imgur.com/4HJJ3.png

但我想像这样添加一些边框。 http://i.stack.imgur.com/BKvGP.png

Answer 1

1- 您可以通过这些边框为 table 添加背景图像，并为 table 设置样式。

或：

2- 你可以在 table 左右放置两个 div，然后给每个 div 一个背景图像和一个边框图像，也让 div 有一个绝对位置。

Answer 2

您可以使用 pseudo 元素 :before 和 :after 来提供边框

table {
  position: relative;
}
table:before,
table:after {
  content: '';
  height: 100%;
  position: absolute;
  border-color: black;
  border-style: solid;
  width: 10px;
  top: -1px;
}
table:before {
  left: -2px;
  border-width: 2px 0px 2px 2px;
}
table:after {
  right: -2px;
  border-width: 2px 2px 2px 0px;
}

<table>
  <tr>
    <td>
      <input id="c11" placeholder="c1,1" class="matr_c" readonly>
    </td>
    <td>
      <input id="c12" placeholder="c1,2" class="matr_c" readonly>
    </td>
  </tr>
  <tr>
    <td>
      <input id="c21" placeholder="c2,1" class="matr_c" readonly>
    </td>
    <td>
      <input id="c22" placeholder="c2,2" class="matr_c" readonly>
    </td>
  </tr>
</table>

我如何在 css 中为矩阵自定义边框

How i can do custom border for matrix in css

html

css

border