Как задать фиксированную ширину для столбцов внутри таблицы в HTML?
P. S: пожалуйста, не отмечайте как дубликат, пока не прочтете весь вопрос
У меня есть table
, где я хочу дать фиксированную ширину columns
, поскольку я хочу отображать их динамически. Ширина table
равна 100%. Таким образом, в этом table
может быть отображен только 1 столбец или 3 или 6 и т. д. Но проблема в том, что если в сценарии у меня есть только 1 столбец, данные в этой таблице занимают все 100% table
, даже если я задал фиксированную ширину столбца. Я хочу, чтобы ширина столбца фиксироваться независимо от ширины стола. Пожалуйста, укажи мне, где я ошибаюсь. Ниже приведен код, который я пробовал.
table {
table-layout: fixed;
word-break: break-all;
}
table td {
border: 1px solid;
overflow: hidden;
}
<table width="100%" cellspacing='0' cellpadding='0'>
<col width="100px" />
<col width="50px" />
<col width="50px" />
<tr>
<th>First Column</th>
<th>Second Column</th>
<th>Third Column</th>
</tr>
<tr>
<td>Text 1</td>
<td>text 2</td>
<td>text 3</td>
</tr>
</table>
3 ответа:
Добавьте скрытый столбец в конец таблицы.
Таблица будет иметь 100% ширину и размер скрытого столбца, чем размер страницы.
Пример кода:
table { table-layout: fixed; word-break: break-all; border-collapse: collapse; width:100%; } td { height:50px; border: 1px solid; } th { height:50px; border: 1px solid; } .F { width:100%; border:none; border-left:1px solid; }
<table> <col width='200px' /> <col width='100px' /> <col width='50px' /> <tr> <th>First Column</th> <th>Second Column</th> <th>Third Column</th> <th class='F'></th> </tr> <tr> <td>Text 1</td> <td>text 2</td> <td>text 3</td> <td class='F'></td> </tr> </table>
Вот полный код.
<!DOCTYPE html> <html> <head> <style> table, td, th { border: 1px solid black; } table { border-collapse: collapse; width: 100%; } th { height: 50px; } </style> </head> <body> <h2>The width and height Properties</h2> <p>Set the width of the table, and the height of the table header row:</p> <table> <tr> <th>First Column</th> <th>Second Column</th> <th>Third Column</th> </tr> <tr> <td>Text 1</td> <td>Text 2</td> <td>Text 3</td> </tr> </table> </body> </html>
Здесь несколько иной подход. В этом примере он возьмет таблицу автоматической ширины, а затем зафиксирует ширину и ширину столбцов. Я нашел это полезным, когда у меня есть таблица автоматической ширины, которую я хочу отфильтровать без изменения размера таблицы.
В этом примере используются элементыcol
иth
на хорошо сформированной таблице.Использование класса
fixed
добавляется, чтобы таблицу можно было легко сбросить./*jQuery - mistajolly - fix table widths*/ var table = $(this); if(!table.hasClass('fixed')){ table.width(table.outerWidth(true)); table.addClass('fixed'); var cols = table.find('col'); table.find('th').each(function(index){ $(cols[index]).width($(this).outerWidth(true)).addClass('fixed'); }); } /* Reset and remove fixed widths */ if(table.hasClass('fixed')){ table.removeClass('fixed').css('width',''); table.find('.fixed').each(function(index){ $(this).removeClass('fixed').css('width',''); }); }