Динамическая ширина таблицы по столбцу

Question

У меня есть одна таблица, в которой отображаются данные из динамического содержимого. Я хочу сделать таблицу шириной 100% , если в ней 6 столбцов. и таблица width auto , если меньше 5 столбцов.

Я пробовал с CSS, но, когда есть только два столбца, он расширяется на два столбца до полной ширины, в то время как таблица имеет ширину 100% и выглядит неловко.

Есть ли какой-нибудь Javascript, jQuery-скрипт для получения этого результата?

Answer 1

Использование jQuery и обеспечение выбора первой строки в теле таблицы на случай, если thead имеет другой макет.

function setTableWidth(tableId) {

    var $tbl = $('#'+tableId);
    var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
    $tbl.width(newWidth)

 }

Answer 2

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

function setTableWidth(tableId) {
    myTable = document.getElementById('tableId');
    if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
        myTable.style.width = '100%';
    else
        myTable.style.width = 'auto';
 }

Обратите внимание, что он не будет работать, если у какой-либо из ячеек в первом ряду есть colspan. Это просто подсчет количества столбцов в первой строке и установка ширины на основе этого.