跨单元格组 HTML table 中的居中文本

Question

我希望，一旦有了 HTML table，就可以使用一组单元格并在垂直和水平方向居中编写文本（在本例中为单个字符）穿过那组单元格，如下图所示。

我探索了在第一个（左上角）td 中编写文本然后使用 overflow CSS 属性的可能性 td 元素，以便文本超过 td 的限制。但是，这不适用于垂直居中文本（跨越 tr）。

有什么方法可以只使用简单的 HTML table 和 CSS 来做到这一点，还是我应该考虑使用 canvas 来重叠文本在 table?

Answer 1

解决方案一：
使用 rowspan and colspan，连同 valign 和 align（它们是特定的 <table> 居中属性）：

td {
  border: 1px solid #eee;
  padding: 1rem;
}
td[rowspan] {
  background-color: rgba(255,0,0,.07);
  border: 1px solid red;
}

<table>
   <tr>
     <td rowspan="2" colspan="2" valign="center" align="center">
     A
     </td>
     <td>x</td>
   </tr>
   <tr>
    <td>x</td>
  </tr>
  <tr>
    <td>x</td>
    <td>x</td>
    <td>x</td>
  </tr>

方案二：
我在评论中描述的骇人听闻的方式：

td {
  border: 1px solid #eee;
  padding: 1rem;
}
.hacky-td {
  position: relative;
  overflow: visible;
}
.hacky-content {
  font-size: 3rem;
  position: absolute;
  transform: translate(-50%,-50%);
  border: 1px solid red;
  padding: 1rem;
  background-color: rgba(255,0,0,.07);
  left: -1px; /* should be 0, it's 1 because of the border */
  top: -1px; /* should be 0, it's 1 because of the border */
}

<table>
   <tr>
     <td></td>
     <td></td>
     <td>x</td>
   </tr>
   <tr>
     <td></td>
     <td class="hacky-td"><div class="hacky-content">A</div></td>
     <td>Lorem<br>ipsum,<br>dolor<br>sit<br>amet</td>
  </tr>
  <tr>
    <td>x</td>
    <td>Lorem ipsum, dolor sit amet</td>
    <td>x</td>
  </tr>

您会注意到，无论 4 个单元格中的每一个单元格的大小如何，A 都将保持在交界处的中心。

解决方案 3：- CSS 网格
如果你想在整个区域居中，你将不得不使用 CSS 网格，这使得它有点微不足道：

.grid {
  display: grid;
  grid-template: 
    "a b c" auto
    "d e f" auto
    "g h i" auto
    /1fr 2fr 1fr;
    grid-gap: 2px;
}
.grid > *:not(.overlay) {
  padding: 1rem;
  content: 'x';
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #eee;
}
.a { grid-area: a;}
.b { grid-area: b;}
.c { grid-area: c;}
.d { grid-area: d;}
.e { grid-area: e;}
.f { grid-area: f;}
.g { grid-area: g;}
.h { grid-area: h;}
.i { grid-area: i;}
.overlay {
  grid-area: 1/1/3/3;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .5rem;
}
.overlay span {
  border: 1px solid red;
  font-size: 3rem;
  font-weight: bold;
  background-color: rgba(255,0,0,.07);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="grid">
  <div class="a">x</div>
  <div class="b">Lorem<br>ipsum<br>dolor<br>sit<br>amet</div>
  <div class="c">x</div>
  <div class="d">x</div>
  <div class="e">x</div>
  <div class="f">x</div>
  <div class="g">x</div>
  <div class="h">Amet sit door ipsum lorem, ipsum dolor sit amet.</div>
  <div class="i">x</div>
  <div class="overlay"><span>A</span></div>
</div>

解决方案 4：- 以整个 table

为中心

这是一种通用的居中方法，它适用于任何东西（你可以放置任何其他元素而不是 <table>）：

.relative {
  position: relative;
  display: inline-block;
}
.overlay {
  position: absolute;
  top: 0.5rem;
  bottom: 0.5rem;
  left: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(255,0,0,.07);
  font-size: 2.4rem;
  border: 1px solid red;
}
td {
  padding: 1rem;
  border: 1px solid #eee;
}

<div class="relative">
  <table>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>x</td>
      <td>x</td>
      <td>x</td>
    </tr>
  </table>
  <div class="overlay">
    A
  </div>
</div>

Answer 2

可能有更好的方法来做到这一点。但是当你覆盖元素时，事情会变得混乱，因为你需要使用绝对定位。不管怎样，这里有一些代码和示例可以帮助您入门。

我不知道你的确切情况是什么，但你可以通过 JavaScript 动态获取你需要的尺寸，以动态设置 CSS。

https://codepen.io/anon/pen/xmqPbo

HTML

<span id="table-overlay-text-2">B</span> 
<span id="table-overlay-text-1">A</span> 
<table id="table1">
  <tr>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>
<br />

<table id="table1">
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
</table>

CSS

#table1 td, #table2 td{
  border: 1px solid black;
  height: 75px;
  width: 75px;
}

#table-overlay-text-1{
    font-size:50px;
    position: absolute;
    z-index:2;
    margin-top: 50px;
    margin-left: 65px;
}

#table-overlay-text-2{
    font-size:50px;
    position: absolute;
    z-index:2;
    margin-top: 275px;
    margin-left: 140px;
}

跨单元格组 HTML table 中的居中文本

Center text in an HTML table across group of cells

html

css

html-table

css-tables