Встановіть мінімальну ширину в таблиці HTML <td>

79

У моїй таблиці є кілька стовпців.

Кожен стовпець повинен мати динамічну ширину, яка залежить від розміру вікна браузера. З іншого боку, кожна колонка не повинна бути занадто крихітною. Тому я спробував встановити min-widthдля цих стовпців, але це не допустима властивість. Пробував min-widthна <td>як добре , але це теж є неприпустимим властивістю.

Чи є спосіб встановити min-widthдля col / td в таблиці HTML?

html css html-table

— Тханма Сан
джерело

4

Додайте <div> всередину <td> і встановіть для нього мінімальну ширину, що завгодно

— Shadow

3

Якщо вам обов’язково потрібно використовувати <td>, ви повинні побачити це: stackoverflow.com/questions/6426779/…

— Стейсі Гаррісон

з px - так; з% - ні :(

— dszakal

70

спробуйте це:

<table style="border:1px solid">
<tr>
    <td style="min-width:50px">one</td>
    <td style="min-width:100px">two</td>
</tr>
</table>

Розгорніть фрагмент

— Алі Сагірвеліохулларі
джерело

6

Це прийнята відповідь, але, дивлячись на відповідь нижче: stackoverflow.com/a/29379832/207552 , схоже, результати невизначені.

— bschandramohan

Дуже поганий метод! 1) Використання абсолютної ширини є абсолютно неприпустимим і 2) Потрібно повторювати цей стиль надлишком для всіх <td> таблиці, замість того, щоб використовувати його один раз у таблиці стилів!

— Апостолос

@Apostolos Чому абсолютні ширини неприпустимі? Це залежить від випадку використання. А також, звичайно, ви можете використовувати відповідні селектори та / або назви класів замість вбудованих стилів. Це лише мінімальний приклад. Проблема з цією відповіддю полягає в тому, що в специфікаціях сказано, що вона має невизначену поведінку.

— trixn

Це погано, оскільки 1) це залежить від ширини екрану і 2) це стосується всіх таблиць , що може бути не в порядку. (1) обробляється за допомогою відсотків, а (2) обробляється за допомогою назв класів.

— Апостолос

39

min-widthі max-widthвластивості працюють не так, як ви очікуєте для комірок таблиці. З специфікації :

У CSS 2.1 вплив "мінімальної ширини" та "максимальної ширини" на таблиці, вбудовані таблиці, комірки таблиць, стовпці таблиць та групи стовпців не визначено.

Це не змінилося в CSS3.

— ов
джерело

11

Насправді це змінилося у віконної моделі CSS3, і властивості застосовуються до "всіх елементів, крім

— незамінених

min-width та max-width на td працює з px, але не працює з% (останній Chrome)

— dszakal

8

Спробуйте використати невидимий елемент (або пседоелемент), щоб змусити комірку таблиці розширитися.

td:before {
  content: '';
  display: block; 
  width: 5em;
}

JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/

— Петро Цибулька
джерело

4

Ваше посилання мертве, і ваше рішення для мене не спрацювало!

— Мойтаба

2

Я думаю, це не спрацює, якщо ти отримаєш table-layout: fixed;.

— sr9yar

0

<table style="min-width:50px; max-width:150px;">
    <tr>
        <td style="min-width:50px">one</td>
        <td style="min-width:100px">two</td>
    </tr>
</table>

Це працює для мене за допомогою скрипта електронної пошти.

— Redous
джерело

1

Тоді це повинен бути коментар, а не відповідь, мілорде

— Тханма Сан

-1

Одним із способів має бути додавання a <div style="min-width:XXXpx">в межах td, і нехай<td style="width:100%">

— користувач9413974
джерело

-3

<table style="border:2px solid #ddedde">
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
    <tr>
        <td style="border:2px solid #ddedde;width:50%">a</td>
        <td style="border:2px solid #ddedde;width:20%">b</td>
        <td style="border:2px solid #ddedde;width:30%">c</td>
    </tr>
</table>

— AmirtharajCVijay
джерело

4

Визначте ширину у відсотках, просто зробіть це динамічною базою за розміром вікна, але я хочу динамічну ширину І мінімальну ширину

— Thanhma San