Как задать фиксированную ширину для столбцов внутри таблицы в HTML?

P.S: Пожалуйста, не отмечайте как дубликат, пока вы не прочтете весь вопросКак задать фиксированную ширину для столбцов внутри таблицы в HTML?

У меня есть 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>

источник

2016-11-16 sTg

Вам не нужна компоновка стола. просто используйте divs с float: left. потому что у вас фиксированная ширина. –

@Mr_Green: Но проблема в том, что данные занимают все 100% таблицы, хотя я дал фиксированную ширину 100 пикселей или 50 пикселей или около того на – sTg

Это потому, что вы используете таблицу. Здесь вам не нужна таблица. –

Добавить скрытый столбец в конец стола.

Таблица будет 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>

источник

2016-11-16 09:29:10

Я поддержал ваш ответ брата за ваши усилия. Но хотя это не сработает, если я использую cols для определения ширины столбцов. Пробовал. – sTg

Вы можете определить ширину, используя cols. Если вы оставите скрытый столбец в конце таблицы, он будет работать (проверен). –

Я пробовал один и тот же код с помощью cols, но для меня он не работал. Можете ли вы изменить свой ответ на это. Если это сработает, я приму свой ответ. – sTg

Вот полный код.

<!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>

источник

2016-11-16 06:19:40

Удаление одного столбца из таблицы делает другую td занимающей всю ширину. Не работает. – sTg

Пожалуйста, скажите мне, что у вас есть полная проблема, что вы хотите достичь? –

В соответствии с вашим приведенным выше кодом, если я удаляю любой столбец, ширина других 2 tds не должна корректироваться по ширине таблицы. – sTg

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

В этом примере используются элементы 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',''); 
    }); 
}

источник

2017-07-26 17:22:00 mistajolly

Как задать фиксированную ширину для столбцов внутри таблицы в HTML?

ответ

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