html - 跨单元格组在 HTML 表格中居中文本
问题描述
我希望,一旦有了一个 HTML 表格,就能够获取一组单元格并编写一个文本(在这种情况下,一个字符),该文本在该组单元格中垂直和水平居中,如下图所示。
我已经探索了在第一个(左上角)中编写文本的可能性,td
然后overflow
在该元素上使用 CSS 属性td
以使文本超出td
. 但是,这不适用于垂直居中文本(跨tr
)。
有没有办法只使用简单的 HTML 表格和 CSS 来做到这一点,或者我应该考虑使用画布来在表格上重叠文本?
解决方案
解决方案 1:
使用rowspan和colspan以及valign
and 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:
我在评论中描述的 hacky 方式:
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>
推荐阅读
- java - 如何使用 XMLStreamWriter/IndentingXMLStreamWriter 将“而不是”写入 XML 输出
- mysql - SQL 查询未按预期返回
- iframe - 在跨域 iframe 消息中正确预防 XSS
- ocaml - 给定OCaml中的条件,递归地从列表中删除元素?
- java - Elasticsearch:提供了 _id 的批量索引 json
- sql - 要汇总的 Oracle Sql 查询,但让主列仅显示一次
- mysql - 使用 curl(Google Cloud 平台)从存储桶将数据加载到 Cloud SQL
- powershell - 将脚本文件移动到另一个位置后,我的 PowerShell 脚本不起作用?
- java - 保存数据和显示数据时如何防御xss
- python - 1048, "列 'execution_period' 不能为空"