Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to align <td rowspan ="value"> value to center vertically?

Tags:

html

css

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  |  
like image 652
Azima Avatar asked Nov 17 '17 05:11

Azima


People also ask

How do I center a row vertically?

1 — Vertical Center Using Auto Margins One way to vertically center is to use my-auto . This will center the element within it's flexbox container (The Bootstrap 4 . row is display:flex ). For example, h-100 makes the row full height, and my-auto will vertically center the col-sm-12 column.


2 Answers

Try :

<td style="vertical-align : middle;text-align:center;">
like image 51
helpdoc Avatar answered Oct 01 '22 03:10

helpdoc


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>
like image 30
Bhargav Chudasama Avatar answered Oct 01 '22 03:10

Bhargav Chudasama