Как получить несколько отдельных таблиц HTML для всех, будет иметь ту же ширину, что и самая широкая таблица

Проблема: У меня есть разметка HTML для обработки, состоящая из нескольких таблиц, вложенных в другую таблицу. Я бы хотел, чтобы "внутренние таблицы" были одинаковыми. Мне также хотелось бы, чтобы все "внутренние таблицы" были не шире ширины самой широкой "внутренней таблицы" в ее естественном состоянии.

Я не хочу просто устанавливать ширину всех таблиц на некоторый фиксированный процент, так как я не знаю заранее, какая ширина самой широкой "внутренней таблицы" должна быть до тех пор, пока HTML-страница не будет создана.

^{_{Источник: https://en.wikipedia.org/wiki/File:Erasene-screen001.png}}

Я хочу, чтобы все таблицы имели ту же ширину, что и inner-table-zero. В настоящее время ни одна из таблиц не имеет назначенной ширины и того, как мне это нравится, потому что я хочу, чтобы во всех внутренних таблицах естественно выбиралась ширина любой таблицы по умолчанию.

Вопрос: Есть ли какой-либо CSS или JQuery или Javascript трюк, кто-нибудь знает, что получит этот желаемый стиль?

Обновление: Я собираюсь удалить этот вопрос, потому что люди, похоже, хотят понизить меня за то, что у меня нет веской причины не желать 100%. У меня do есть веская причина... Я также не знаю, до тех пор, пока среда выполнения не станет такой "самой внешней" таблицей (это рекурсивно-сгенерированная структура потенциально неограниченной глубины).

Ответ 1

Я не знаю никаких трюков HTML/CSS, чтобы сделать это, но так как вы открыты для jQuery...

Предполагая, что все ваши внутренние таблицы имеют класс "внутренний", вы можете сделать что-то вроде этого:

$(document).ready(function() {
    var largest = 0;
    $('table.inner').each(function() {
        var width = $(this)[0].offsetWidth;
        if(width > largest) {
            largest = width;
        }
    }).width(largest);
});

EDIT: обновил мой ответ, чтобы использовать offsetWidth вместо jQuery width(), поскольку последний не включает в себя границу, отступы или поля. Протестировано на IE7, FF, Safari, Opera, и это дает желаемый эффект.

Ответ 2

Почему вы не можете просто установить внутренние таблицы на 100% ширину и ограничить внешнюю таблицу? Если это не так, что ваша внешняя таблица будет ограничивать внутренние таблицы, то ваш пример не делает очень хорошую работу, указав это.

"Трюк" CSS, который вы ищете, это:

table.inner { width: 100%; }

Ответ 3

Вы можете использовать JavaScript для обновления каждой ширины таблицы в соответствии с самой широкой. Но у меня такое чувство, что вы ищете решение без script... (правильно?)

Ответ 4

Код внутренних таблиц для всех имеет ширину = 100%, тогда все они будут такими же широкими, как и внешняя таблица. Если вы хотите, чтобы все столбцы внутренних таблиц были одинаковой ширины, вам нужно будет указать эти ширины в заголовках столбцов (или первых строк).

<HTML>
<HEAD>

<TITLE>Mike Test</TITLE>
</HEAD>
<BODY>

<table border=1>
  <tr><td>
    <table border=1>
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1>
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>



<table border=1>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>First</td>
      <td>Second</td>
      </tr>
    </table>
  </td></tr>
  <tr><td>
    <table border=1 width="100%">
      <tr>
      <td>1</td>
      <td>2</td>
      </tr>
    </table>
  </td></tr>
</table>

</BODY>
</HTML>

Ответ 5

Я не вижу, как вы можете обойти ширину: 100%. Это в основном то, что вы пытаетесь сделать: установить ширину каждой таблицы в общую ширину содержащего элемента, ширина которой определяется самой широкой встроенной таблицей в этом столбце.

Отредактировано для добавления:

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

Ответ 6

Я также не знаю, до тех пор, пока среда выполнения не станет "самой внешней" таблицей (это рекурсивно-сгенерированная структура потенциально неограниченной глубины).

Вам нужно знать?

оберните все вокруг div или таблицы, придайте ему фиксированную или процентную ширину, чтобы сделать это прямо в вашем веб-дизайне, тогда все таблицы контейнеров должны быть установлены на 100%

.content-wrapper { width: 450px; }
table { width: 100%; }

<div id="content-wrapper">
    <!-- all your tables/content/divs/etc -->
</div>

Это то, что каждый делает, и именно поэтому во всех элементах дизайна кода у вас есть DIV, называемый Wrappers, чтобы добраться до вашей точки.

Пожалуйста, не пытайтесь изобрести колесо... все это делают, вы не первый.