I need to align td cell value to center, both horizontally and vertically. <td> has a rowspan attribute.
The output right now is like:
A | B | C | D
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Desired:
A | B | C | D
1 | 2 | 3 |
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
use <td rowspan="4" align="center">4</td> its work
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>You easily do it with css using CSS selectors and the vertical-align property.
Any td or th by default has a rowspan = 1.
To position the rowspan'd td text in the center, just do this:
Taking an example of rowspan = "3"
td[rowspan = "3"] {
vertical-align: middle;
}
If you want to make it generic, just use it as below:
th[rowspan]:not([rowspan="1"]) {
vertical-align : middle;
}
Just add 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>
<!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>The text is centered aligned by default. Please check existing css as it is overwrite the align property.
Add general class into your css.
.mytable td[rowspan] {
vertical-align: middle;
text-align: center;
}
Code
<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>