如何用CSS/HTML将表格渲染为数学矩阵样式并设置边框？

要让你的HTML表格呈现数学矩阵的经典样式，核心是给表格添加左右两侧的大方括号，同时优化内部元素的排版。以下是适配你现有HTML结构的CSS代码：

完整CSS代码 #

table.matrix {
  border-collapse: separate;
  border-spacing: 1em;
  position: relative;
  text-align: center;
  white-space: nowrap;
}

table.matrix::before {
  content: "[";
  position: absolute;
  left: -1.2em;
  height: 100%;
  font-size: 3em;
  display: flex;
  align-items: center;
}

table.matrix::after {
  content: "]";
  position: absolute;
  right: -1.2em;
  height: 100%;
  font-size: 3em;
  display: flex;
  align-items: center;
}

table.matrix td {
  padding: 0.3em 0.5em;
  border: none;
  font-family: monospace;
}

使用方法 #

给你的表格添加matrix类即可：

<table class="matrix">
  <tr>
    <td>1</td>
    <td>9</td>
    <td>-13</td>
  </tr>
  <tr>
    <td>20</td>
    <td>5</td>
    <td>-6</td>
  </tr>
</table>

关键样式说明 #

• 表格容器：border-spacing控制列之间的空白，position: relative为伪元素提供定位基准，text-align: center让单元格内容居中
• 左右方括号：利用::before和::after伪元素生成括号，通过绝对定位固定在表格两侧，flex布局确保括号垂直居中，大字号模拟数学矩阵的醒目括号
• 单元格优化：移除默认边框，使用等宽字体（monospace）让不同位数的数字对齐更工整，少量padding提升可读性

扩展：切换为花括号 #

如果需要呈现花括号样式的矩阵，只需修改伪元素的content值：

table.matrix::before {
  content: "{";
}
table.matrix::after {
  content: "}";
}

内容的提问来源于stack exchange，提问作者HJA24