html/css for brackets around mathematical matrix -- prefer lightweight

html, math, matrix

Solution

Demo: http://jsfiddle.net/NQ6ww/38/

Done via CSS using `:before` and `:after` pseudo elements to simulate the square brackets.

    .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>

Problem

I'm writing up some math in html. I want to do it in a small and lightweight fashion. This is what I have so far. It makes the matrices just fine, but is there a way I can do the brackets one typically sees around matrices? ``` 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> ```

Original source