Question

问题是我有表，其中2列ROWS是动态填充的。

因此，对于每一行，最后一列有额外的行数。第2列只有数字，但第3列有文字。

<tr>
    <td>1</td>
    <td>
       <p>5</p>
       <p>2</p>
    </td>
    <td>
       <p>text</p>
       <p>text</p>
    </td>
</tr>

现在的问题是，如果第3列有长文本（进入下一行），则第2列和第3列将失去对齐。我需要的是让标签和段落标签中的多行彼此垂直对齐。

JS小提琴来描述问题： http://jsfiddle.net/a85ZK/3/

Answer 1

table的结构需要设置为2行。

第一行的第一个单元格跨越两行，属性为rowspan="2" DEMO

<table border="1" style="text-align: center;">
        <tr>
            <th>id</th>
            <th>count</th>
            <th width="50">position</th>
        </tr>
        <tr>
            <td style="vertical-align: top;" rowspan="2">1</td>
            <td style="vertical-align: top;">
                5
            </td>
            <td>
                too long text that stretches column
            </td>
        </tr>
        <tr>
            <td style="vertical-align: top;">
                10
            </td>
            <td>
                text
            </td>
        </tr>
    </table>

Answer 2

你需要为td创建类或id我认为你可能对每个表行都有相同的div 这就是它导致你出现问题的原因。

<tr>
<td class="something"></td>
<p>somthing</p>
<td class="something"></td>
<p></p>
<td class="somthing"></td>
</tr>

动态表行中的对齐方式

2 个答案: