跨单元格在HTML表格中居中显示文本

Question

我希望一旦有了HTML表格，就能够采用一组单元格并在该组单元格中垂直和水平居中地编写文本（在这种情况下为单个字符），就像在下图。

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

是否可以使用简单的HTML表和CSS来实现此目的，还是应该考虑使用画布在表上重叠文本？

Answer 1

解决方案1：
将rowspan和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>

解决方案2：
我在评论中描述的骇客方式：

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>）：

.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;
}