Css table column width by content

table-layout

The table-layout CSS property sets the algorithm used to lay out cells, rows, and columns.

Try it

Syntax

/* 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; 

Values

The automatic table layout algorithm is used. The widths of the table and its cells are adjusted to fit the content. Most browsers use this algorithm by default.

The fixed table layout algorithm is used. When using this keyword, the table’s width needs to be specified explicitly using the width property. If the value of the width property is set to auto or is not specified, the browser uses the automatic table layout algorithm, in which case the fixed value has no effect.
The fixed table layout algorithm is faster than the automatic layout algorithm because the horizontal layout of the table depends only on the table’s width, the width of the columns, and borders or cell spacing. The horizontal layout doesn’t depend on the contents of the cells because it depends only on explicitly set widths.

In the fixed table layout algorithm, the width of each column is determined as follows:

• A column element with explicit width sets the width for that column.
• Otherwise, a cell in the first row with explicit width determines the width for that column.
• Otherwise, the column gets the width from the shared remaining horizontal space.

With this algorithm the entire table can be rendered once the first table row has been downloaded and analyzed. This can speed up rendering time over the «automatic» layout method, but subsequent cell content might not fit in the column widths provided. Cells use the overflow property to determine whether to clip any overflowing content, but only if the table has a known width; otherwise, they won’t overflow the cells.

Formal definition

Formal syntax

Examples

Fixed-width tables with text-overflow

This example uses a fixed table layout, combined with the width property, to restrict the table’s width. The text-overflow property is used to apply an ellipsis to words that are too long to fit. If the table layout were auto , the table would grow to accommodate its contents, despite the specified width .

HTML

table> tr> td>Edtd> td>Woodtd> tr> tr> td>Alberttd> td>Schweitzertd> tr> tr> td>Janetd> td>Fondatd> tr> tr> td>Williamtd> td>Shakespearetd> tr> table> 

CSS

table  table-layout: fixed; width: 120px; border: 1px solid red; > td  border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; > 

Result

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Jul 6, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

CSS make table td take the width of its content

The following tutorial shows you how to use CSS to do «CSS make table td take the width of its content».

CSS Style

The CSS style to do «CSS make table td take the width of its content» is

.wide !-- w w w . d e mo 2 s .c o m--> width:400px; background:lightblue; > .narrow < width:200px; background:lightpink; > .table-responsive < max-width:100%; overflow-x:auto; > table < border:1px solid black; border-collapse:collapse; > td < border:1px solid black; padding:5px; white-space:nowrap; >

HTML Body

body> div >"wide"> div >"table-responsive"> table> tbody> tr> td>Many words td>word td>oneword td>onemoreword     !-- w w w . d em o 2 s . c o m -->  div >"narrow"> div >"table-responsive"> table> tbody> tr> td>Many words td>word td>oneword td>onemoreword       

The following iframe shows the result. You can view the full source code and open it in another tab.

html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> .wide !-- ww w .d e m o 2 s .c o m--> width: 400px; background: lightblue; > .narrow < width: 200px; background: lightpink; > .table-responsive < max-width: 100%; overflow-x: auto; > table < border: 1px solid black; border-collapse: collapse; > td < border: 1px solid black; padding: 5px; white-space: nowrap; >  body> div >"wide"> div >"table-responsive"> table> tr> td>Many words td>word td>oneword td>onemoreword     div >"narrow"> div >"table-responsive"> table> tr> td>Many words td>word td>oneword td>onemoreword       

Related

• CSS let width of a table depend on the td’s width
• CSS maintain TD width in 100% width table
• CSS make a td element not wrap text inside a table
• CSS make table td take the width of its content
• CSS make table td take the width of its content (Demo 2)
• CSS make table td take the width of its content (Demo 3)
• CSS make table td tr auto width based on text length

demo2s.com | Email: | Demo Source and Support. All rights reserved.

Источник

How to Fit Table Column to Content Width in Tailwind

How can we set a specific table column to fit the width of its contents?

Suppose we have a table in our DOM that looks something like this:

table> tr> td>Texttd> td>Texttd> td class="stop-stretching">Buttontd> tr> table> 

We want the .stop-stretching class to, well, not stretch. We want it to fit to the content of its cell.

1. Fit table column to cell width in CSS

We can fit the column to the width of the cell in CSS by setting the width to 1% and ensuring white-space: nowrap .

.stop-stretching < width: 1%; white-space: nowrap; > 

We can also achieve this using width: 1px .

.stop-stretching < width: 1px; white-space: nowrap; > 

These solutions make the assumption that the contents of the cell will be wider than 1% or 1px .

2. Fit table column to cell width with TailwindCSS

We can easily achieve this in TailwindCSS, but there is no class for width: 1% .

We’ll need to head over to tailwind.config.js to add this class.

module.exports = < // . theme: < extend: < width: < '1/100': '1%' > > >, // . > 

Then, we can apply our utility classes for the 1% .

table> tr> td>Texttd> td>Texttd> td class="whitespace-nowrap w-1/100">Buttontd> tr> table> 

table> tr> td>Texttd> td>Texttd> td class="whitespace-nowrap w-px">Buttontd> tr> table> 

Источник

table-layout

The table-layout property defines what algorithm the browser should use to lay out table rows, cells, and columns.

As explained in the CSS2.1 specification, table layout in general is usually a matter of taste and will vary depending on design choices. Browsers will, however, automatically apply certain constraints that will define how tables are laid out. This happens when the table-layout property is set to auto (the default). But these constraints can be lifted when table-layout is set to fixed .

• auto : the default. The browser’s automatic algorithm is used to define how a table’s rows, cells, and columns are laid out. The resulting table layout is generally dependent on the content of the table.
• fixed : With this value, the table’s layout ignores the content and instead uses the table’s width, any specified width of columns, and border and cell spacing values. The column values used are based on widths defined on columns or cells for the first row of the table.
• inherit : indicates that the value is inherited from the table-layout value of its parent

In order for a value of fixed to have any effect, the table’s width has to be set to something other than auto (the default for the width property). In the demos below, all the table widths are set to 100%, which assumes we want the table to fill its parent container horizontally.

The best way to see the the effects of a fixed table layout algorithm is using a demo.

When you first view the above demo, you’ll notice the layout of the table columns is unbalanced and awkward. At that point, the table is using the browser’s default algorithm to define how to lay out the table, which means the content will dictate the layout. The demo exaggerates this fact by including a long string of text inside one table cell, while all the other table cells use just two words each. As you can see, the browser expands the first column to accommodate the larger bit of content.

If you click the “Toggle table-layout: fixed” button, you’ll see what the table layout looks like when the “fixed” algorithm is used. When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table’s first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.

Further examples may help make this clearer. In the following demo, the table has a element whose first element has a width of 400px . Notice in this case, toggling table-layout: fixed has no effect.

This happens because the default layout algorithm is essentially saying “make the first column 400px wide, and distribute the remaining columns based on their content”. Since the other three columns have the same content as each other, there will be no change. But now let’s add some extra text content to one of the other columns:

Now if you click the toggle button, you’ll see the columns adjust to accommodate a fixed layout, irrespective of content. Once again, the same thing is happening; the first column is set at 400px then the remaining columns are divided equally. But this time, because one of the columns has extra content, the difference is noticeable.

How a fixed layout algorithm determines column widths

The following two demos should help in understanding that the first row of the table is what helps to define the column widths of a table set to table-layout: fixed .

In the above demo, the first cell in the table’s first row has a width of 350px. Toggling table-layout: fixed adjusts the other columns, but the first one remains the same. Now try the following demo:

In this case, it’s the second row that has a width attached to its first table cell. Now when the toggle button is clicked, all the column widths are adjusted. Again, this is because the fixed layout algorithm is using the first row to determine the column widths, and the end result is that it distributes the widths equally.

Benefits of a fixed layout algorithm

The aesthetic benefits of using table-layout: fixed should be clear from the demonstrations above. But the other major benefit is performance. The spec refers to the fixed algorithm as a “fast” algorithm, and for good reason. The browser does not need to analyze the entire table’s content before determining the size of the columns; it only needs to analyze the first row. So the result is a faster processing of the table’s layout.

Источник