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

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 widt开发者_如何学编程hs 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.

---

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%; }

---

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&lt;/td>
    </tr>
</table>

---

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

td{
   width:80%;
}

---

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