Есть ли способ синхронизации ширины столбца в HTML-таблице?

Question

Если у меня есть эти две таблицы:

<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>

Как сделать так, чтобы два столбца имели одинаковую ширину?

Я не могу объединить таблицы, так что это не вариант. Я также не могу использовать фиксированную ширину, так как ее динамический контент. Есть идеи? Возможно, что-то в javascript, чтобы верхние столбцы соответствовали ширине нижней таблицы? Я не эксперт по JS, поэтому я понятия не имею, возможно ли это или как это сделать. Php также является опцией на столе, если есть способ использовать это для ее решения.

Answer 1

Можете ли вы определить CSS для этого динамического контента? Предположим, что эти таблицы были вложены в div следующим образом:

<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>

Я бы написал что-нибудь вроде этого:

#content table td { width: 80%; }

Answer 2

Я бы использовал ширину в процентах для «текущего» столбца и буферизовал его столбцами фиксированной ширины, если это необходимо. 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>

Answer 3

Попробуйте

<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>

или добавьте класс name к элементу td и определите стиль где-нибудь еще, например, внешний файл или стиль заголовка

Answer 4

Вы можете использовать CSS для этого. Вам понадобится более длинная переноска контента.

td{
   width:80%;
}