html - 表格周围的圆括号(矩阵)

标签 html css

我有一个简单的矩阵，其中包含一些输入框，我是使用 MathML 创建的。它在 Firefox 中运行良好，但在 Chrome 中运行不佳，我想仅使用 HTML(表格)和 CSS 重新创建相同类型的内容，以便它适用于更多浏览器。

这是预期效果的屏幕截图链接，因为我无法发布图片:https://i.imgur.com/P2ICwSb.png

Working MathML 片段: 

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input + input {
  margin-right: 2em;
}
input:first-child {
  margin-left: 1em !important;
}
<math xmlns="http://www.w3.org/1998/Math/MathML" display="block">
  <semantics>
    <mrow>
      <mo>(</mo>
      <mtable columnalign="center center center" rowspacing="1ex" displaystyle="false">
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
        <mtr>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
          <mtd>
            <mi>
              <input type="text">
            </mi>
          </mtd>
        </mtr>
      </mtable>
      <mo>)</mo>
    </mrow>
  </semantics>
</math>

我最初的想法是使用border-radius 属性并设置表格的左右边框。下面有一个工作片段，但与原始 MathML 代码相比，我不喜欢括号顶部和底部的结果。使用 border-radius 方法时，矩阵顶部和底部的线条明显变细，并且似乎“淡出”。

第一次尝试使用

和 border-radius 的片段:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  border-left: 2px solid #000;
  border-right: 2px solid #000;
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
}
<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table>

我尝试使用 CSS 2D 转换和实际文本来实现相同的效果，但结果并不是特别好。

使用 CSS 转换和

进行实验:

input {
  width: 24px;
  background-color: transparent;
  border: 1px solid gray;
  font-family: serif;
  font-weight: bold;
  text-align: center;
  font-size: 16px;
}
input {
  margin-right: 1em;
}
td:first-child input {
  margin-left: 1em !important;
}
td:last-child input {
  margin-right: 1em !important;
}
table {
  display: inline-block;
  vertical-align: middle;
}
span {
  font-family: 'Latin Modern Math';
  transform: scale(2, 4);
  font-size: 2em;
  display: inline-block;
  vertical-align: middle;
}
<span>(</span>
<table>
  <tbody>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
    <tr>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
      <td>
        <input type="text">
      </td>
    </tr>
  </tbody>
</table><span>)</span>

有什么方法可以更接近 MathML 代码的原始行为？我想知道基于 SVG 的解决方案是否会更好。

我知道 MathML 代码使用拉丁现代数学字体呈现括号，但我不确定如何拉伸(stretch)括号以包围表格(无论其内容如何)。

最佳答案

我会制作两张括号图片(一张左一张右)并将它们的高度设置为 100%。通过这种方式，您可以避免使用真实文本(以及 font-size 属性)。

然后将容器设置为position: relative，将图片设置为position: absolute;左(/右):0px；顶部:0px；高度:100%；。如果你写 position: absolute; 应该介于两者之间left:左括号的宽度；右:右括号的宽度；。

希望对您有所帮助:-)

关于html - 表格周围的圆括号(矩阵)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31368839/

上一篇：php - Google reCAPTCHA g-recaptcha-response 在 PHP 中没有值(value)

下一篇：html - 将 svg 添加到网页？

©2024 IT工具网  联系我们