How to ensure 2 columns line up when both table cells have inner tables

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

If you insist on working with tables (wich should only be done for tabular data), I would strongly advise against nesting them. You can perfectly achieve your desired result without them, by making use of the rowspan attribute. Your code would look something like this:

<table width="400" class="main">
    <tr>
        <td rowspan="4" valign=top>column 1</td>
        <td rowspan="4"valign=top>column 2</td>
        <td  valign=top>column 3</td>
        <td valign=top>column 4</td>
    </tr>
    <tr class="grid">
        <td>line 1</td>
        <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  class="grid">
        <td>line 2</td>
        <td>line 2 description</td>
    </tr>
    <tr  class="grid">
        <td>line 3</td>
        <td>line 3 description</td>
    </tr>
</table>​

You will have to update the rowspan value as your content grows, but that should be fairly easy with some server side scripting.

For a working example, look here: http://jsfiddle.net/HPkvV/8/

(note that i also removed the horrible !important from your css, not required here and should be used with care!)

Answer 2

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/

Answer 3

     <style>
  .main
 {
 border: 1px solid #000000;
 }
 .main td
  {
    border: 1px solid #000000;
  }
 .grid
 {
table-layout: fixed;
overflow: scroll;
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">
    <tr>
        <td valign="top">column 1</td>
        <td valign="top">column 2</td>
        <td valign="top" style="width:25%;">column 3
            <table id="names" class="grid">
                <tr style="height:20;">
                    <td>line 1</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 2</td>
                </tr>
                <tr  style="height:20;">
                    <td>line 3</td>
                </tr>
            </table>
        </td>
        <td valign="top" style="width:25%;">column 4
            <table id="desc" class="grid">
                <tr>
                    <td  ><div style="overflow-y:auto; height:20px;">line   1                 description is a little too long so it wraps line 1 description is a little too long so it wraps</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 2 description</div></td>
                </tr>
                <tr>
                    <td><div style="overflow-y:auto; height:20px;">line 3 description</div></td>
                </tr>
            </table>
        </td>
        </tr>
    </table>
   </td>
 </tr>
  </table>

I am sorry it's not very elegant but I hope it server's your cause...