Как создать столбец таблицы с динамической шириной

У меня есть таблица с динамическим числом столбцов. Если ширина таблицы увеличивается более чем на 100%, ширина столбца должна быть минимальной ширины, определенной в CSS. В противном случае ширина столбца должна соответствовать содержимому.Как создать столбец таблицы с динамической шириной

Как я могу это сделать?

<style> 
table { 
    table-layout: fixed; 
    width: auto; 
} 
td { 
    min-wdith: 250px; 
} 
</style> 

<table> 
    <tr> 
     <td> 
      Col 1 
     </td> 
     <td> 
      Col 2 
     </td> 
     <td> 
      Col 3 
     </td> 
     <td> 
      Col 4 
     </td> 
    </tr> 
</table>

источник

2015-05-07 Sanky

У вас есть опечатка: '' мин-wdith'' вместо '' мин-width''. Я не уверен, что то, что вы хотите, возможно, используя только CSS, но указание минимальной ширины приведет к тому, что ячейки будут больше, чем ваш контент, если он короток, независимо от размера таблицы. Кроме того, если у вас много столбцов (скажем, восемь), ваша таблица будет больше, чем экран HD (8 x 250 px = 2000 px, что больше 1920 пикселей). – Chop

Он работает для большого количества столбцов, но не для маленькой колонки. Скажем, если у меня есть только один cloumn, то ширина этого столбца становится 100% от таблицы. – Sanky

Если вы нанесете минимальную ширину на все ваши столбцы, таблица будет шире экрана, если у вас слишком много столбцов. Это была моя точка зрения. Кроме того, я хотел бы понять, почему важно иметь минимальную ширину, когда режим «fit content» не подходит для экрана? Указание ширины (max-) в таблице и отсутствие ширины для td уже привело бы к тому, что браузер вычислил оптимальную ширину для каждого столбца, а таблица не переполнилась бы. – Chop

Простое решение: дайте width: 100%; на стол.

table { 
 
    table-layout: fixed; 
 
    width: 100%; 
 
    border:1px solid; 
 
    margin-top:20px; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    min-width: 250px; 
 
    border:1px solid; 
 
}

<table> 
 
    <tr> 
 
     <td> 
 
      Col 1 
 
     </td> 
 
     <td> 
 
      Col 2 
 
     </td> 
 
     <td> 
 
      Col 3 
 
     </td> 
 
     <td> 
 
      Col 4 
 
     </td> 
 
    </tr> 
 
</table> 
 

 
<table> 
 
    <tr> 
 
     <td> 
 
      Col 1 
 
     </td> 
 
     <td> 
 
      Col 2 
 
     </td> 
 
     
 
    </tr> 
 
</table>

источник

2015-05-07 08:53:41 ketan

Я хочу, чтобы ширина соответствовала содержимому. – Sanky

Поскольку я знаю, что ширина соответствует содержимому, а 'min-width', невозможно использовать css. – ketan

Я также не знаю, как это сделать с JS. – Sanky

Как создать столбец таблицы с динамической шириной

ответ

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