html/css用于数学矩阵周围的括号 - 更喜欢轻量级

Question

我正在用html写一些数学.我想以小巧轻便的方式做到这一点.这就是我到目前为止所拥有的.它使矩阵很好,但有没有办法可以做一个通常在矩阵周围看到的括号？

For example, if <b>A</b> is the matrix
<br>
<br>
<div align=center>
    <table>
        <tr>
            <td>1+3i</td>
            <td>2+i</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4-3i</td>
            <td>5</td>
            <td>-2</td>
        </tr>
    </table>
</div>
<br>

Answer 1

演示: http ://jsfiddle.net/NQ6ww/38/

通过CSS使用:before和:after伪元素完成来模拟方括号.

    .matrix {
        position: relative;
    }
    .matrix:before, .matrix:after {
        content: "";
        position: absolute;
        top: 0;
        border: 1px solid #000;
        width: 6px;
        height: 100%;
    }
    .matrix:before {
        left: -6px;
        border-right: 0;
    }
    .matrix:after {
        right: -6px;
        border-left: 0;
    }

<div align=center>
    <table class="matrix">
        <tr>
            <td>1+3i</td>
            <td>2+i</td>
            <td>10</td>
        </tr>
        <tr>
            <td>4-3i</td>
            <td>5</td>
            <td>-2</td>
        </tr>
    </table>
</div>