web-dev-qa-db-ja.com

<td rowspan = "value">値を垂直方向の中央に揃える方法

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  |
phphtmlcss
10
Azima

してみてください：

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

つかいます <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>
2
Bhargav Chudasama

一般クラスをcssに追加します。

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

これを試して：

<td rowspan="4" tyle="text-align:center;">4</td>
0
Faridul Khan

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
Subhankar Mitra
<!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>

デフォルトでは、テキストは中央揃えで配置されます。 alignプロパティを上書きするため、既存のcssを確認してください。

0
pryashrma

enter image description here

ライブフィドル

コード

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

try：

<td align="center" valign="middle">
0
Upvesh Kumar