CSS table column autowidth
Given the following how do i make my last column auto size to its content? (The last column should autosize-width to the content. Suppose i have only 1 li element it should shrink vs. having 3 li elements etc):
table < table-layout: fixed; width: 100%; >table tr < border-bottom: 1px solid #e9e9e9; >table thead td, th < border-left: 1px solid #f2f2f2; border-right: 1px solid #d5d5d5; background: #ddd url("../images/sprites4.png") repeat-x scroll 0 100%; font-weight: bold; text-align: left; >table tr td, th < border: 1px solid #D5D5D5; padding: 15px; >table tr:hover < background: #fcfcfc; >table tr ul.actions < margin: 0; >table tr ul.actions li 4 Answers 4
The following will solve your problem:
Flexible, Class-Based Solution
And a more flexible solution is creating a .fitwidth class and applying that to any columns you want to ensure their contents are fit on one line:
ID Description Status Notes Works perfectly! (my case having table width 100% and no other columns have widths. Applied this to one column). Tested in IE7/8/9, Firefox 12 and Chrome 19.
This solution works well without table-layout: fixed that is set in the css in the question jsfiddle.net/hCkch/1
Effing brilliant, mate! Really clever trick to «prioritize» certain columns to make sure they don’t squished onto multiple lines by large «text» columns, like «Description» or «Notes». Nice one! To make it even more useful, I would call the class .fitwidth and then just set the class on the columns that you don’t want going to multiple lines. I’ll edit your answer to add that.
If you want to make sure that last row does not wrap and thus size the way you want it, have a look at
You could specify the width of all but the last table cells and add a table-layout:fixed and a width to the table.
(or set this for the last TD as Sander suggested instead).
This forces the inline-LIs not to break. Unfortunately this does not lead to a new width calculation in the containing UL (and this parent TD), and therefore does not autosize the last TD.
This means: if an inline element has no given width, a TD’s width is always computed automatically first (if not specified). Then its inline content with this calculated width gets rendered and the white-space -property is applied, stretching its content beyond the calculated boundaries.
So I guess it’s not possible without having an element within the last TD with a specific width.
table-layout¶
Свойство table-layout определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.
Демо¶
Синтаксис¶
/* Keyword values */ table-layout: auto; table-layout: fixed; /* Global values */ table-layout: inherit; table-layout: initial; table-layout: revert; table-layout: revert-layer; table-layout: unset; Значения¶
Значение по-умолчанию: auto
Применяется к тегу или к элементу, у которого значение display установлено как table или inline-table .
Спецификации¶
Поддержка браузерами¶
Описание и примеры¶
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73
html> head> meta charset="utf-8" /> title>table-layouttitle> style> table table-layout: fixed; /* Фиксированная ширина ячеек */ width: 100%; /* Ширина таблицы */ > .col1 width: 160px; > .coln width: 60px; > style> head> body> table border="1"> col class="col1" /> col span="9" class="coln" /> tr> td>td> td>2012td> td>2013td> td>2014td> td>2015td> td>2016td> td>2017td> td>2018td> td>2019td> td>2020td> tr> tr> td>Нефтьtd> td>5td> td>7td> td>2td> td>8td> td>3td> td>34td> td>62td> td>74td> td>57td> tr> tr> td>Золотоtd> td>3td> td>6td> td>4td> td>6td> td>4td> td>69td> td>72td> td>56td> td>47td> tr> tr> td>Деревоtd> td>5td> td>8td> td>3td> td>4td> td>7td> td>73td> td>79td> td>34td> td>86td> tr> table> body> html> Как задать ширину ячеек таблицы под контент
Подскажите пожалуйста как сделать через инлайновые свойства (письмо верстаю) чтобы ширина каждой ячейки была автоматически подогнана под контент? Проблема в том, что у меня ширина ячейки зависит от ширины самого большого контента в столбце таблицы. А мне нужно чтобы не было никаких пробелов между ячейками в строке (при этом не объединяя ячейки). Пример кода на облаке и тут:
Значение @очень_длинная_переменная Значение @переменная @переменная х @переменная @переменная
1 ответ 1
Как вариант для каждой строки создавать отдельную таблицу, а не в одной, как у Вас. Либо сверстать на дивайдерах.
Итоговый вариант на таблицах:
Значение: @очень_длинная_переменная
Значение: @длинная_переменная
@переменная x @переменная @переменная
по моему с таблицами вместо строк получилось еще хуже ))). А ы всеми почтовиками/браузерами/клиентами читаются нормально?
@discipleartem что-то Вы странное сделали. я совсем не это имела в виду. А покажите как Вы хотите, чтобы было в итоге (хоть на бумаге нарисуйте), а то пока не понятно, какой Вы хотите результат.
Задача №1 — чтобы не было пробелов между ячейками в строке и чтобы размер ячейки автоматически зависел только от контента данной ячейки. Красным цветом обозначены пробелы, которых быть не должно.
Fit cell width to content
Given the following markup, how could I use CSS to force one cell (all cells in column) to fit to the width of the content within it rather than stretch (which is the default behaviour)?
this should stretch this should stretch this should be the content width
I realize I could hard code the width, but I’d rather not do that, as the content which will go in that column is dynamic. Looking at the image below, the first image is what the markup produces. The second image is what I want.
8 Answers 8
I’m not sure if I understand your question, but I’ll take a stab at it:
this should stretch this should stretch this should be the content width
@diEcho I didn’t write that part, that was from the example code. Regardless, it is bad practice to use the width attribute on elements. In this quick example, the inline CSS is fine, but it should be abstracted into a file if this was production-level code.
A cleaner way to do this IMO would be to define a style called «nostretch» (or something like that), and then just define nostretch in the CSS to have width:1% and the nowrap. Then the last TD would have ‘class=»nostretch block»‘. That way you can «nostretch» any cell you want.
This is a good solution, but sadly, in Bootstrap 3 my button groups will wrap from this: jsfiddle.net/wexdX/326 Any ideas how I can suppress it?
This only works when the content is wider then width:1% — right? Because if the content is smaller then width:1%, the cell will be larger.
max-width:100%; white-space:nowrap; @SlavaFominII I just applied these settings inside the style attribute of the table element. So style=»the_above_settings».
For me, this is the best autofit and autoresize for table and its columns (use css !important . only if you can’t without)
.myclass table < table-layout: auto !important; >.myclass th, .myclass td, .myclass thead th, .myclass tbody td, .myclass tfoot td, .myclass tfoot th
Don’t specify css width for table or for table columns. If table content is larger it will go over screen size to.
There are many ways to do this!
correct me if I’m wrong but the question is looking for this kind of result.
this should stretch this should stretch this should be the content width
The first 2 fields will «share» the remaining page (NOTE: if you add more text to either 50% fields it will take more space), and the last field will dominate the table constantly.
If you are happy to let text wrap you can move white-space:nowrap; to the style of the 3rd field
will be the only way to start a new line in that field.
alternatively, you can set a length on the last field ie. width:150px, and leave percentage’s on the first 2 fields.