Как сделать так, чтобы несколько отдельных таблиц HTML имели одинаковую ширину с самой широкой таблицей - PullRequest
Новая
       20

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

12 голосов
/ 11 февраля 2009

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

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

Here is a visual example

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

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

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

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

Ответы [ 6 ]

8 голосов
/ 11 февраля 2009

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

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

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

РЕДАКТИРОВАТЬ: обновил мой ответ, чтобы использовать offsetWidth вместо width() в jQuery, так как последний не включает в себя рамку, отступы или поля. Протестировал его на IE7, FF, Safari, Opera, и он дает желаемый эффект.

3 голосов
/ 11 февраля 2009

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

CSS-трюк, который вы ищете: 

table.inner { width: 100%; }
1 голос
/ 11 февраля 2009

Кодируйте внутренние таблицы, чтобы все имели ширину = 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>
1 голос
/ 11 февраля 2009

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

0 голосов
/ 11 февраля 2009

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

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

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

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

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

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

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

0 голосов
/ 11 февраля 2009

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

Отредактировано, чтобы добавить:

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...