Как получить несколько отдельных HTML-таблиц ко всем быть той же шириной как самая широкая таблица
Если ваш elements всегда начинается со слова Item, вы можете сделать что-то подобное, используя split () :
const str = 'Item 1Item 2Item 3Item 4Item N-2Item N-1Item N'
var arr = str.split("I").slice(1).map(x => "I" + x);
console.log(arr);Еще лучше, и в качестве альтернативы вы можете сделать это с помощью одного регулярного выражения, используя match ()
const str = 'Item 1Item 2Item 3Item 4Item 999Item N-2Item N-1Item N'
var arr = str.match(/Item\s[1-9|N|-]+/g);
console.log(arr);6 ответов
Я не знаю ни о каких приемах 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);
});
Править: обновленный мой ответ на использование offsetWidth вместо jQuery width(), поскольку последний не включает границу, дополнение или поля в нем. Протестированный это на IE7, FF, Safari, Opera, и это дает желаемый эффект.
Почему Вы не можете только накрыть на внутренние столы к 100% шириной и позволить ему быть ограниченным внешней таблицей? Если не то, что Ваша внешняя таблица будет ограничивать внутренние таблицы, то Ваш пример не делает очень хорошего задания определения этого.
CSS "прием", который Вы ищете:
table.inner { width: 100%; }
Вы могли использовать JavaScript для обновления каждой таблицы width согласно самой широкой. Но у меня есть чувство, что Вы ищете решение сценария меньше... (право?)
Кодируйте внутренние таблицы ко всем, имеют width=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>
Я также не знаю до времени выполнения, какая таблица будет "наиболее удаленной" таблицей (это - рекурсивно сгенерированная структура потенциально неограниченной глубины).
Необходимо ли знать?
перенесите все вокруг отделения или таблицы, дайте ей фиксированную ширину или ширину процента для создания ее прямо в веб-дизайн, затем на все контейнерные столы нужно накрыть к 100%
.content-wrapper { width: 450px; }
table { width: 100%; }
<div id="content-wrapper">
<!-- all your tables/content/divs/etc -->
</div>
именно это все делают, и именно поэтому во всех элементах дизайна на коде у Вас есть названные Обертки DIV, для получения до точки.
Не пытайтесь изобрести велосипед..., все делают это, Вы не первый.
Я не вижу, как можно обойти width:100%. Это в сущности, что Вы пытаетесь сделать: установите ширину каждой таблицы к общей ширине содержания элемента, ширина которого определяется самой широкой встроенной таблицей в том столбце.
Отредактированный для добавления:
Если Вы действительно хотите избежать его любой ценой, можно всегда использовать прототип, чтобы получить фактические ширины элементов в пикселях и затем повторно применить максимальную ширину ко всем другим элементам. Мог, вероятно, быть сделан легко с помощью прототипа и поведений.