J'ai besoin d'aligner la valeur de la cellule td au centre, à la fois horizontalement et verticalement. a l'attribut rowpan. La sortie en ce moment est comme:
A | B | C | D
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Voulu:
A | B | C | D
1 | 2 | 3 |
1 | 2 | 3 | 4
1 | 2 | 3 |
1 | 2 | 3 |
Essayez:
<td style="vertical-align : middle;text-align:center;">
utilisation <td rowspan="4" align="center">4</td>
c'est du travail
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>
Ajoutez une classe générale dans votre CSS.
.mytable td[rowspan] {
vertical-align: middle;
text-align: center;
}
Essaye ça:
<td rowspan="4" tyle="text-align:center;">4</td>
Ajoutez simplement rowpan 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>
Le texte est centré aligné par défaut. Veuillez vérifier le CSS existant car il écrase la propriété align.
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>
essayez:
<td align="center" valign="middle">