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 td {
min-width: 1em;
padding: 0 .25em;
text-align: center;
border: 0;
}
.sup, .sub {
font-size: 75%;
line-height: 1px;
}