table-layout с исключением одной колонки

#html #css #css3

У меня есть динамическая таблица, с одним полем. При нажатии кнопки "добавить" добавляется
еще один  и тд. на первом  у меня нет кнопки "удалить" но при добавлении следующих,
эта кнопка появляется. Для таблицы я использую table-layout поскольку внутри может
быть select который может быть длинным и портить всю таблицу и table-layout меня вполне
устраивает, но вот когда я добавляю следующее поле и появляется мелкая кнопка "удалить"
- она тоже идет как ячейка (td) и соответственно ее размер становиться таким же как
и размер других ячеек. я пробовал делать на table table-layout:fixed; width:100%, а
на ячейку width:5%, но это не помогло, также как и просто установление ширины. Подскажите
как сделать ее поменьше? Пример плнкр
    

Ответы

Ответ 1

как вариант вышло пара вариантов для решения вопроса:


добавить стили в css:

table, tr, td:nth-child(-1) {
     width: auto;
     border:none;
     margin: 1px;
}


добавить в  одну дополнительную колонку, которую можно скрыть прибавив стиль
border-color:transparent и добавив установленную ширину например width:30px и тогда
все ячейки будут по размерам одинаковы за исключением последней. Плюс еще в том что
не зависимо от кол-ва динамически добавившихся колонок - последняя будет выделена именно
под нужную ширину. это тоже работает но не так красиво выходит :)


Ответ 2

После тега < table > добавьте описание колонок. Для каждой колонки вы можете задать
ее ширину.