Question

请参阅以下代码

<table align="center" class="section">
    <tr>
        <td>Name</td>
        <td>Ram</td>
    <tr>
        <td>Age</td>
        <td>20</td>
    </tr>
    <tr>
        <td> Reason </td>
        <td>  xxx </td>
        <td> yyyy </td>
        <td>.....</td>
        .....................
    </tr>
</table>

小提琴链接：http://jsfiddle.net/WKgu4/

当前输出：

Name     Ram
Age      20
Reason   xxx     yyyy

原因tr将具有“n”个td，这意味着将根据需要添加动态内容所以如果在原因中添加了任何td我想要输出如下

预期输出：

Name     Ram
Age      20
Reason   xxx
         yyyy
         zzzz
         ccccc
         vvvvvv

如何对齐原因tr？因为它有动态内容。 “n”动态添加的原因。但我想像上表那样对齐

Css：

.section tr td
{
    padding: 10px;
}

需要逐一调整原因的动态内容。

如何解决这个问题？

Answer 1

如果您不想更改HTML，请尝试 CSS ：

.section tr:last-child{
    vertical-align:top;
}
.section tr td
{
    padding: 10px;
}
.section tr:last-child>td~td{
    display:table-row;
}

Demo Fiddle

Answer 2

您需要重复<tr>才能获得以上输出。

你可以做的是

<table align="center" class="section">
      <tr>
        <td>Name</td>
        <td>Ram</td>
      <tr>
        <td>Age</td>
        <td>20</td>
      </tr>
      <tr>
          <td> Reason </td>
          <td>  xxx </td>
      </tr>
<!- repeating part-->
       <tr>
          <td></td>
          <td> yyy</td>
      </tr>
       <tr>
          <td></td>
          <td> zzz</td>
      </tr>
------
</table>

Answer 3

为什么不把第二轮TD中的所有理由与BR标签分开，如

<tr>
  <td> Reason </td>
  <td> xxx
       <br />yyyy
       ...
  </td>
</tr>

并添加CSS

.section tr td
{
  padding: 10px;
  vertical-align: top;
}

Answer 4

不清楚为什么要这样做，但你可以用CSS3做到这一点：

tr:nth-child(3) td:not(:nth-child(1)) {display:table-row;}
tr:nth-child(3) td:nth-child(1) {vertical-align:top;}

查看小提琴 - http://jsfiddle.net/fwnHG/

此外，这个小提琴使用<th>所以它在语义上更正确 - http://jsfiddle.net/ZB2Gn/

Answer 5

<table align="center" class="section">
  <tr>
<td>  Name
</td>
<td>
Ram
</td>
      <tr>
          <td>
              Age
          </td>
          <td>
              20
          </td>
      </tr>
         <td> Reason </td>
         <td>  xxx </td>
      <tr>
      <tr>
         <td></td><td> yyyy </td>
      </tr>
      </tr>
    </table>

动态内容表正确对齐

5 个答案:

Demo Fiddle