提问人：Azima 提问时间：11/17/2017 最后编辑：Alexander AbakumovAzima 更新时间：4/16/2020 访问量：54301
如何将 <td rowspan =“value”> 值垂直居中？
How to align <td rowspan ="value"> value to center vertically?
问：
我需要在水平和垂直方向上将单元格值对齐到中心。 具有属性。td<td>rowspan
现在的输出是这样的：
A | B | C | D
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
期望：
A | B | C | D
1 | 2 | 3 |
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
答：
2赞
Bhargav Chudasama
11/17/2017
#1
使用其工作<td rowspan="4" align="center">4</td>
table td {
padding: 5px;
}<table border="1">
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td rowspan="4" align="center">4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>评论
0赞
Azima
11/17/2017
Bhargav，谢谢你的回答......我试图只为一个特定的td设置内嵌样式。它不起作用..为什么？
0赞
Azima
11/17/2017
<td rowspan=“<？= $totalRows; ？>” style=“background-color： #f3f4f5;text-align：居中;字体粗细：粗体;”>5.0</TD>
0赞
Bhargav Chudasama
11/17/2017
因此，轻松添加样式padding:
1赞
Azima
11/17/2017
我试过了。。。没用..但是“垂直对齐：中间”奏效了......我不知道为什么“填充：”不起作用。
-1赞
Swathi Kottakota
11/17/2017
#2
使用属性align
<td align="center">Name</td>
评论
1赞
Sameer
4/3/2019
HTML5 不支持 align 属性。请改用 CSS。style='文本对齐：居中';
0赞
Faridul Khan
11/17/2017
#3
试试这个：
<td rowspan="4" tyle="text-align:center;">4</td>
0赞
Subhankar Mitra
11/17/2017
#4
只需添加 rowspan 4 即可。
<table>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
<td>D</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
<td rowspan="4">1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
0赞
pryashrma
11/17/2017
#5
<!DOCTYPE html>
<html>
<head>
<style>
#customers td, #customers th {
border: 1px solid #ddd;
}
</style>
</head>
<body>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td rowspan ="4">Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
</tr>
</table>
</body>
</html>默认情况下，文本居中对齐。请检查现有的 css，因为它覆盖了 align 属性。
评论
0赞
Azima
11/17/2017
我正在使用 <table class=“table table-striped table-hover”> 。它会阻碍默认对齐吗？
47赞
helpdoc
11/17/2017
#6
尝试：
<td style="vertical-align : middle;text-align:center;">
0赞
Upvesh Kumar
11/17/2017
#7
尝试：
<td align="center" valign="middle">
0赞
Sameer
4/3/2019
#8
将通用类添加到您的 css 中。
.mytable td[rowspan] {
vertical-align: middle;
text-align: center;
}
1赞
rahulworld
7/15/2019
#9
法典
<table class="table table-bordered">
<thead>
<tr>
<td rowspan="2" style="vertical-align: middle;">
first
</td>
<td rowspan="2" style="vertical-align: middle;">
Second
</td>
<td rowspan="2" style="vertical-align: middle;">
Third
</td>
<td rowspan="1" colspan="2">
Fourth
</td>
</tr>
<tr>
<td>
fifth
</td>
<td>
sixth
</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
1赞
Harshith Rai
4/16/2020
#10
您可以使用 CSS 选择器和 vertical-align 属性轻松使用 css 来完成此操作。
Any 或默认情况下具有 .tdthrowspan = 1
要将 'd 文本放在中间，只需执行以下操作：
举个例子rowspantdrowspan = "3"
td[rowspan = "3"] {
vertical-align: middle;
}
如果你想让它成为通用的，只需按如下方式使用它：
th[rowspan]:not([rowspan="1"]) {
vertical-align : middle;
}
评论