JSFiddle - React, Tailwind, and code Playground

HTML

<p>Выпишем расширенную матрицу коэфицентов:</p>
<div class="equation">
A=
<table class="matrix">
    <tbody><tr>
        <td>2</td>
        <td>-1</td>
        <td>2</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>2</td>
        <td>-3</td>
        <td>1</td>
    </tr>
    <tr>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>-1</td>
    </tr>
    <tr>
        <td>3</td>
        <td>2</td>
        <td>3</td>
        <td>-1</td>
    </tr>
</tbody></table>
·
<table class="matrix">
    <tbody><tr>
        <td>-2</td>
    </tr>
    <tr>
        <td>10</td>
    </tr>
    <tr>
        <td>-1</td>
    </tr>
    <tr>
        <td>7</td>
    </tr>
</tbody></table></div>
<p>1-й шаг. Запишем элементарную треугольную матрицу L<sub>1</sub> в соответствии с формулой (10) для исключения неизвестного x<sub>1</sub> из системы:</p>
<div class="equation">
L<sub>1</sub>=
<table class="matrix">
    <tbody><tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>-0.5</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
    </tr>
    <tr>
        <td>-1.5</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
    </tr>
</tbody></table>
</div>
<p>Умножим эту матрицу на расширенную матрицу коэфициентов, получим матрицу после 1-ого шага:</p>
<div class="equation">
A<sup>(1)</sup>=
<table class="matrix">
    <tbody><tr>
        <td>1</td>
        <td>0</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>0</td>
        <td>1</td>
        <td>0</td>
        <td>0</td>
    </tr>
    <tr>
        <td>-0.5</td>
        <td>0</td>
        <td>1</td>
        <td>0</td>
    </tr>
    <tr>
        <td>-1.5</td>
        <td>0</td>
        <td>0</td>
        <td>1</td>
    </tr>
</tbody></table>
·
<table class="matrix">
    <tbody><tr>
        <td>2</td>
       ...

CSS

.equation {
    margin-left: 3em;
}
.matrix {
    display: inline-table;
    border: solid #000;
    border-width: 0 1px;
    border-collapse: collapse;
    vertical-align: middle;
    *display: inline; /* для IE7-, чтоб ему( */
    *margin-right: .25em; /* туда же, чтоб пробелы не "съедал" */
}
.matrix tr:before, .matrix tr:after {
    display: table-cell;
    content: '\a0';
    width: .25em;
}
.matrix tr:first-child:before, .matrix tr:first-child:after {
    border-top: 1px solid #000;
}
.matrix tr+tr+tr+tr:before, .matrix tr+tr+tr+tr:after {
    border-bottom: 1px solid #000;
}

.matrix td {
    min-width: 1em;
    padding: 0 .25em;
    text-align: center;
    border: 0;
}
.sup, .sub {
    font-size: 75%;
    line-height: 1px;
}