Таблица клеток принимают минимально возможную ширину

В table с table-layout набора к auto & width: 100%, можно поручить колонки/ячейки таблицы, чтобы принять наименьшая ширина возможно? Например, у меня есть столбец с тремя кнопками действий с white-space:nowrap, и я бы хотел, чтобы этот столбец/ячейки занимал ровно столько же, чтобы показывать три кнопки в одной строке.Таблица клеток принимают минимально возможную ширину

Другим подходом было бы поручить одному столбцу максимально использовать ширину.

источник

2015-05-23 dragonfly

То, что вы описали это нормальное поведение в этом макете. Поэтому, если ваш код ведет себя по-другому, вы должны изменить рендеринг по умолчанию. вам придется добавить свой (сокращенный) код для нас, чтобы помочь. И вы получите очки плюс, если вы создадите с ним jsfiddle! – arkascha

Что делать, если у вас есть таблица шириной 1000 пикселей и 2 столбца. Оба будут иметь ширину 50% вправо? Но я бы хотел, чтобы первый столбец занимал минимальную ширину, а второй - остальное. – dragonfly

А, так вы фиксируете фиксированную ширину? Вы не сказали этого в своем вопросе. В этом случае попробуйте установить ширину столбцов на 0% против 100%. – arkascha

Вы можете установить ширину столбцов до 0% против 100%. Механизмы рендеринга будут автоматически расширять узкие столбцы (столбцы), необходимые для соответствия содержимому.

Вот скрипка демонстрирует поведение: http://jsfiddle.net/nog2oqjx/

Markup:

<table> 
    <tr> 
     <td> 
      <button>1</button> 
      <button>2</button> 
      <button>3</button> 
     </td> 
     <td> 
     </td> 
    </tr> 
</table>

Стили:

table { width: 100%; } 
tr { width: 100%; } 
td { width: 0%; background-color: green; padding: 10px; } 
td:last-of-type { width: 100%; background-color: yellow; } 
button { width: 40px;}

источник

2015-05-23 17:30:44 arkascha

'width: 0%' разбивает макет в Firefox. 'width: 1%' и 'width: 0px' работают для уменьшения размера col до минимума. – billynoah

Попробуйте установить некоторые поля на ноль.

button { 
 
    margin: 0px; 
 
    } 
 

 
td { 
 
    margin: 0px; 
 
    }

<table cellspacing="0"> 
 
    <tr> 
 
    <td> 
 
     <button type="button">Button 1 
 
     <button type="button">Button 2 
 
     <button type="button">Button 3 
 
    </td> 
 
    </tr> 
 
</table>

источник

2015-05-23 17:28:06 oMiKeY

Таблица клеток принимают минимально возможную ширину

ответ

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