CODEWITHSUNDEEP
htmlcss
R.P
R.P

Reputation: 500

Alignment in dynamic table rows

The problem is that I have table, where 2 column ROWS are filled dynamically.

So for each row there are n amount of extra rows for last columns. Column #2 has only numbers, but column #3 has text.

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

Now the problem is that if 3rd column has long text (goes onto next line), then column #2 and column #3 loses alignment. What I need is to have multiple rows within tags and paragraph tags to be vertically aligned to each other.

JS fiddle to describe the problem: http://jsfiddle.net/a85ZK/3/

Upvotes: 0

Views: 1494

Answers (2)

G-Cyrillus
G-Cyrillus

Reputation: 106008

The structure of your table needs to be set with 2 rows.

The first cell of first row to be spanned over the two rows with the attribute 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>

Upvotes: 1

syedsafir
syedsafir

Reputation: 62

you need to make class or id for the td i think you might have the same div for each table row that's why its causing you a problem.

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

Upvotes: 0

Related Questions