Question

I have a HTML table, where cell #3 and cell #4 have inner tables.

I need the rows in each table in cell #3 and cell#4 to line up correctly.

The problem is sometimes the length of text line a row may go beyond a single line, and the other table doesn’t have this so the lines don’t match up.

How can I correct this seeing as the data is coming from the database which I don’t have control of?

I have created a jsfiddle: http://jsfiddle.net/HPkvV/

<style>
.main
{
 border: 1px solid #000000;
}
.main td
{
 border: 1px solid #000000;
}
.grid
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
.grid td
{
    border-left: none !important;
    border-right: none !important;
    border-top:1px solid #dddddd;
    border-bottom:1px solid #dddddd;
}
</style>



<table width="400">
<tr>
    <td>
        <table width="100%" class="main">
            <td valign=top>column 1</td>
            <td valign=top>column 2</td>
            <td valign=top>column 3
                <table id="names" class="grid">
                    <tr>
                        <td>line 1</td>
                    </tr>
                    <tr>
                        <td>line 2</td>
                    </tr>
                    <tr>
                        <td>line 3</td>
                    </tr>
                </table>
            </td>
            <td valign=top>column 4
                <table id="desc" class="grid">
                    <tr>
                        <td>line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps</td>
                    </tr>
                    <tr>
                        <td>line 2 description</td>
                    </tr>
                    <tr>
                        <td>line 3 description</td>
                    </tr>
                </table>
            </td>

        </table>
    </td>
</tr>
</table>

Answer 1

is there a reason that you are using nested tables? The second set of information looks like maybe it could be contained by a list. If that was the case it would be a lot easier to make everything play nice.

Styles

.main
{
 border: 1px solid #000000;
}
.main td, .main th
{
 border: 1px solid #000000;
    vertical-align: top;
}
.grid li
{
    height: 4em; /*  this is the value that will help you get them even.  Though you will be guessing, hoping that no content runs too long.*/
    border-bottom:1px solid #dddddd;
}

HTML

<table class="main">
    <thead>
        <tr><th>Column 12</th>
        <th>Column 2</th><th>Column 3</th><th>Column 4</th></tr>
    </thead>
    <tbody>                    
        <tr>
            <td>foo</td>
            <td> bar</td>
            <td>
                <ul class="grid">
                    <li>
                        line 1
                    </li>
                    <li>
                        line 2
                    </li>
                    <li>
                        line 3
                    </li>
                </ul>
            </td>
            <td>
                <ul class="grid">
                    <li>
                        line 1 description is a little too long so it wraps line 1 description is a little too long so it wraps
                    </li>
                    <li>
                        line 2 description
                    </li>
                    <li>
                        line 3 description
                    </li>
                </ul>                
            </td>
        </tr>
    </tbody>
</table>​

It’s not a complete solution without a bit of knowledge about the data.
I updated your fiddle with this solution as well.

Whoops new Fiddle http://jsfiddle.net/HPkvV/2/