Таблица с динамическими столбцами, но макс исправлена

Я хочу, чтобы таблица была на 100%, если страница, которая может содержать любое количество столбцов, динамически созданных. Каждый столбец может содержать очень длинные слова, так что все они могут не помещаться на одной странице. Чтобы исправить это, я использовал table-layout: fixed, который сделал все столбцы таблицы видимыми на странице. Проблема в том, что я все еще хочу, чтобы ширина каждого столбца была динамической, так что если столбец имеет короткие слова, он должен быть короче, чем длина с длинным словом.Таблица с динамическими столбцами, но макс исправлена

Пример: jsfiddle.

Таблица 1 всегда показывает все столбцы, но когда страница достаточно широкая, она сломает слово, даже если в других столбцах есть свободное место.

Таблица 2 работает отлично, когда страница больше, чем столбцы, но первый столбец выталкивает другие столбцы из экрана/на другие объекты, когда окно меньше.

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

Я мог бы принять решение js/jquery, но если это возможно с css, то это предпочтительнее.

Edit:

Столик: Примечание: asasdasdasdasdasdasdasdasdasdasdasd является один слово сокращается, так как таблица не может быть больше, чем это.

+--------------------+----------+---------+ 
|asasdasdasdasdasdasd|qweqweqweq|zxczxczxc| 
|asdasdasdasdasd  |   |   | 
+--------------------+----------+---------+

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

+--------------------------------------+-------------+------------+ 
|asasdasdasdasdasdasdasdasdasdasdasd |qweqweqweq |zxczxczxc | 
+--------------------------------------+-------------+------------+

источник

2012-05-31 olofom

Что я понимаю, что вы хотите, обтекание текста, когда есть большие объемы данных в ячейке и, когда данные коротки она должна вписываться в нет белые пробелы? – MSUH

@MSUH Я отредактировал мое сообщение, чтобы попробовать и уточнить. Я хочу, чтобы даже длинные слова обернулись, если они слишком длинны. Если останется место, лучше всего будет равномерно распределить его по столам. – olofom

Если я понимаю, что это может быть отправной точкой:

var tds; 

$("table").each(function() { 

    tds = $("td"); 

    for(var x = 0; x < tds.length; x++){ 
     tds.eq(x).css('max-width', '100px'); 
    } 

});

источник

2012-05-31 13:15:07

Проблема с этим решением заключается в том, что вы задаете ширину пикселя, и я не знаю, сколько будет столбцов и насколько они будут широкими. Может быть 20 столбцов с шириной таблицы 768px, могут быть два столбца с шириной таблицы 1080px ... и этот JS может быть выполнен с помощью CSS очень легко: 'table # t2 td {max-width: 300px; } ':) – olofom

Не могли бы вы рассчитать количество столбцов в таблице и ширину экрана или документа и заменить максимальную ширину: 100 пикселей на эту пропорцию? это может быть решением? –

Я не уверен, что сработает. Рассмотрим этот сценарий: у меня 10 столбцов и 1000 пикселей по ширине. Для первых 9 столбцов требуется всего 10 пикселей каждый, а 10-й может легко использовать 910px. Какая должна быть максимальная ширина? Они также могут составлять 1/10 каждый. Таким образом, максимальная ширина должна быть 910px или, возможно, 100px? – olofom

Прежде всего удалить "таблицу-макет: фиксированный" свойство.

Попробуйте следующий код, это должно работать отлично в вашем случае:

$(document).ready(function(){ 

$("table").find('tr').children('td').each(function() { 
    var wdth = $(this).html().length + 10; 
    $(this).css({ 'padding-right': '10px' }, { 'width': wdth + 'px' }); 
    }); 
});

источник

2012-06-27 06:13:32

Извините, но это не сработает. http://stackoverflow.com/a/14765961/1872046 –

Таблица с динамическими столбцами, но макс исправлена ​​

ответ

Смежные вопросы

Таблица с динамическими столбцами, но макс исправлена