Question

有没有办法在表格中垂直居中单个td元素？

＆＃13;

<table style="width:100%; text-align: center">
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td> <!--center this-->
  </tr>
</table>

＆＃13;

以下是示例： https://jsfiddle.net/maykel007/q2ag7ehj/

Answer 1

您可以使用rowspan执行此操作。我确实需要改变一下html;向所有行添加<td>，将值添加到第一行，将colspan设置为需要应用的<tr>数量。

小提琴： https://jsfiddle.net/q2ag7ehj/1/

<table style="width:100%; text-align: center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td rowspan="6">94</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td></td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td></td>
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td></td>
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
    <td></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td></td>
  </tr>
</table>

Answer 2

不完全是。

您可以在单元格内垂直居中。
您可以让单元格跨越所有四行

将单元格移动到第一行并添加rowspan属性。然后应用vertical-align CSS属性。

.x {
  vertical-align: middle;
}

<table border="1" width="500px">
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td class="x" rowspan="4">94</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td>
  </tr>
</table>

Answer 3

尝试使用这个JS .each函数。我在另一个答案中找到了这个，无法找到用户给予信用。如果这样可以正常工作，请告诉我再次搜索。

var seen = {};
$('#aTable td').each(function() 
{
    var $this = $(this);
    var index = $this.index();
    var txt =  $this.text();
    console.log(txt);
    if (seen[index] === txt) 
    {
        $($this.parent().prev().children()[index]).attr('rowspan', 2);
        $this.hide();
    }
    else 
    {
        seen[index] = txt;
    }
});

http://jsfiddle.net/djhU7/4/

为了实现这一目标，＆＃34; 94＆＃34;应该在所有单元格中重复（这是垂直对齐数据的基本思路吗？为了使它成为一个共同的值）。在那之后，它基本上做的是，它合并并保留单个值。

Answer 4

您可以使用：

td:nth-child(3) {
  position: relative;
  transform: translateY(calc(-100% * (6/2))); /*/number rows is 6 /*/
}

＆＃13;

td:nth-child(3) {
  position: relative;
  transform: translateY(calc(-100% * (6/2)));
}

＆＃13;

<table style="width:500px; text-align: center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

＆＃13;

Answer 5

问题是您的 94 行位于特定行内，目前是底线，这就是您的94位于底部的原因。

你可以尝试的是一个保证金顶部，如下所示：

.center {
  margin-top : -70px;
}

<table style="width:100%; text-align: center">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr><tr>
    <td>Jill</td>
    <td>Smith</td> 
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson</td> 
    <td><p class="center">94</p></td>
  </tr>
</table>

但它不会响应，这意味着您必须弄清楚每个案例都是为了适应您的响应代码。

CSS中心单个td垂直在表中

5 个答案: