Как задать фиксированную ширину для столбцов внутри таблицы в 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 3

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','');
    });
}