Is there a way to sync column widths in an html table?

Question

If I have these two tables:

<table>
<tr>
<td>Small Length Content</td>
</tr>
</table>

<table>
<tr>
<td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>

How can I make it so that the two columns have the same width?

I can't combine the tables so thats not an option. I also can't use fixed widths since its dynamic content. Any ideas? Perhaps something in javascript to have the top columns match the width of the lower table? I'm no js expert so I have no idea if thats possible or how to do it. Php is an option on the table as well if theres a way to use that to solve it as well.

Answer 1

You can use CSS to accomplish this. You will have to have the longer content wrap.

td{
   width:80%;
}

Answer 2

Are you able to define css for this dynamic content? Suppose these tables were nested inside a div like so:

<div id="content">
  <table>
    <tr>
      <td>Small Length Content</td>
    </tr>
  </table>

  <table>
    <tr>
    <td>Dynamic Content Goes Here And It's Longer Than The TD Above</td>
    </tr>
  </table>
</div>

I would write some css like this:

#content table td { width: 80%; }

Answer 3

try

<table><tr><td style="width:200px">Small Length Content</td></tr></table><table><tr><td>Dynamic Content Goes Here And It's Longer Than The TD Above</td></tr></table>

or add a class to name to the td element and define the style somewhere else like an external file or in header style

Answer 4

I would use a percentage-based width on the 'flowing' column, and buffer it with fixed-width columns if necessary. ie.:

<table style="width: 100%;">
<tr>
<td style="width: 80%;">Small Length Content</td>
</tr>
</table>

<table style="width: 100%;">
<tr>
<td style="width: 80%;">Dynamic Content Goes Here And It's Longer Than The TD Above</td>
</tr>
</table>