Question

我需要将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  |

Answer 1

尝试：

<td style="vertical-align : middle;text-align:center;">

Answer 2

使用<td rowspan="4" align="center">4</td>工作

＆＃13;

table td {
  padding: 5px;
}

＆＃13;

<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>

＆＃13;

Answer 3

试试这个：

RN  1 Value          1 Score          1 Comments       6 Value          6 Score          6 Comments       11 Value         11 Score         11 Comments
--- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- ---------------- -----------------------
1   123.0000         12.3000          Usha P-6914      147.0000         14.7000          Bhaskar L-17957  4569.0000        456.9000         Murali Prasad K-21632
2   321.0000         64.2000          Usha P-6914      741.0000         148.2000         Bhaskar L-17957  9654.0000        1930.8000        Murali Prasad K-21632
3   456.0000         136.8000         Usha P-6914      258.0000         77.4000          Bhaskar L-17957  4789.0000        1436.7000        Murali Prasad K-21632
4   654.0000         261.6000         Usha P-6914      852.0000         340.8000         Bhaskar L-17957  9874.0000        3949.6000        Murali Prasad K-21632

Answer 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>

Answer 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属性。

Answer 6

<强>尝试：

<td align="center" valign="middle">

Answer 7

将通用类添加到CSS中。

 .mytable td[rowspan] {
    vertical-align: middle;
    text-align: center;
}

Answer 8

live fiddle

代码

<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>

Answer 9

您可以使用CSS选择器和vertical-align属性使用CSS轻松完成此操作。

默认情况下，任何td或th都有一个rowspan = 1。

要将rowspan'd td文本放置在中间，只需执行以下操作：以rowspan = "3"

为例

td[rowspan = "3"] {
    vertical-align: middle;
}

如果要使其通用，只需按以下方式使用它即可：

th[rowspan]:not([rowspan="1"]) {
    vertical-align : middle;
}

Answer 10

使用align属性

<td align="center">Name</td>

如何将值垂直对齐

10 个答案: