Change column width css

CSS column-width Property

The column-width property specifies the column width.

The number of columns will be the minimum number of columns needed to show all the content across the element.

column-width is a flexible property. Think of column-width as a minimum width suggestion for the browser. Once the browser cannot fit at least two columns at your specified width then the columns will stop and drop into a single column.

Default value:	auto
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.columnWidth=»100px» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Numbers followed by -webkit- or -moz- specify the first version that worked with a prefix.

CSS Syntax

Property Values

Value	Description	Demo
auto	Default value. The column width will be determined by the browser	Demo ❯
length	A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit

More Examples

Example

Divide the text in a element into three columns:

Example

Specify a 40 pixels gap between the columns:

Example

Specify the width, style, and color of the rule between columns:

Источник

column-width

The column-width CSS property sets the ideal column width in a multi-column layout. The container will have as many columns as can fit without any of them having a width less than the column-width value. If the width of the container is narrower than the specified value, the single column’s width will be smaller than the declared column width.

Try it

This property can help you create responsive designs that fit different screen sizes. Especially in the presence of the column-count property (which has precedence), you must specify all related length values to achieve an exact column width. In horizontal text these are width , column-width , column-gap , and column-rule-width .

Syntax

/* Keyword value */ column-width: auto; /* values */ column-width: 60px; column-width: 15.5em; column-width: 3.3vw; /* Global values */ column-width: inherit; column-width: initial; column-width: revert; column-width: revert-layer; column-width: unset; 

The column-width property is specified as one of the values listed below.

Values

Indicates the optimal column width. The actual column width may differ from the specified value: it may be wider when necessary to fill available space, and narrower when the available space is too small. The value must be strictly positive or the declaration is invalid. Percentage values are also invalid.

The width of the column is determined by other CSS properties, such as column-count .

Formal definition

Initial value	auto
Applies to	Block containers except table wrapper boxes
Inherited	no
Computed value	the absolute length, zero or larger
Animation type	a length

Formal syntax

column-width =
auto |
|
min-content |
max-content |
fit-content( )

=
|

Examples

Setting column width in pixels

HTML

p class="content-box"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. p> 

CSS

.content-box  column-width: 100px; > 

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 17, 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.

Источник

How to Set the Width of the Table Column

If you want to set the width of the table column, you can use some CSS. You need to use the width property.

Example of the setting the width of the table column:

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; > style> head> body> table> colgroup> col span="1" style="width: 20%;"> col span="1" style="width: 50%;"> col span="1" style="width: 30%;"> colgroup> tbody> tr> td>20% td> td>50% td> td>30% td> tr> tbody> table> body> html>

Result

How to expand the last column in the table without expanding the table?

To expand the width of the last column in the table without changing the width of the entire table, you can set the width property of the last column using a percentage value that is larger than the current width.

html> html> head> title>Title of the document title> style> table < width: 100%; > td:first-child < background-color: #32a852; > td:nth-child(2) < background-color: #aaaaaa; > td:last-child < background-color: #5696c7; width: 60%; /* set width of last column to 60% */ > style> head> body> table> colgroup> col span="1" /> col span="1" /> col span="1" /> colgroup> tbody> tr> td>A td> td>C td> td>C td> tr> tbody> table> body> html>

Источник

Create HTML Table With Different Column Sizes

1. Set Size of HTML Table Columns
2. Set Table Columns Width Using In-Line CSS
3. Set Table Columns Width Using Internal CSS

This article explains modifying the column’s width in HTML and CSS to meet our specifications. Because HTML5 deprecated various tags and properties, we will cover some alternate strategies for attaining the required functionality.

This tutorial will cover how to customize HTML tables using in-line and internal CSS.

Set Size of HTML Table Columns

We frequently need to develop tables with several columns and rows for our web pages. Sometimes we need different widths for each column of the HTML table.

Let’s see how we can create a table having columns with different widths. Before HTML5, the table tag and its associated tags like had a width property that allowed the developers to set the required width of the column.

html>  head>  style>  table, th, td   border:1px solid black;  border-collapse: collapse;  >  style>  head>  body>  table style="width:100%">  tr>  th width="15%">IDth>  th width="70%">Nameth>  th width="15%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

The above HTML code uses the width property inside the tag. The table width is set to 100% .

We want the Name column wider than others. So we assign the width 70% to the Name column and 15% to the other two columns each.

Adding up all the figures 70 + 15 + 17 = 100 we get a 100 again.

In HTML5, the width property is deprecated. HTML no longer supports deprecated attributes and tags.

This change in HTML5 encourages developers to use CSS for any styling needed. Let’s see how we can set the table and its column width using CSS.

Set Table Columns Width Using In-Line CSS

Since we cannot use the width property inside the , we can still style our table using the style inside our tags, known as in-line styling. You can give a different width percentage to each column.

Check the code below to understand it clearly.

html>  head>  style>  table, th, td   border:1px solid black;  border-collapse: collapse;  >  style>  head>  body>  table style="width:100%">  tr>  th style="width:10%">IDth>  th style="width:40%">First Nameth>  th style="width:40%">Last Nameth>  th style="width:10%">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>Doetd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>Willtd>  td>40td>  tr>  table>  body>  html> 

In the above code, we assign 10, 40, 40, and 10 widths in percentage to each column. Adding up these figures will make a 100.

Since we set our table width to 100% , we must divide each column in the same range.

Set Table Columns Width Using Internal CSS

We have set the column width in the above code using in-line CSS. But in-line CSS is not recommendable as we must do a lot of rewriting if we want the same functionality on multiple web page regions.

It is a professional practice to keep the HTML and CSS code separate. So let’s see how we can style our table columns using internal CSS.

Internal CSS is written inside the style tag inside the HTML head tag.

Method 1: Use a CSS Class

One of the easiest methods is to assign a class to each tag and then apply styling to them in the style tag. Here’s how.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  .name   width: 70%  >  .id, .age   width: 15%  >  style>  head>  body>  table>  tr>  th class="id">IDth>  th class="name">Nameth>  th class="age">Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Pretty simple. Right? But this method is not efficient in the case of a large number of columns.

Let’s say we have a table with 10 or 20 columns and want different widths for each. Assigning classes to each tag and styling all of them will be a hectic task.

There should be some way of doing this without giving classes to the tags and calling them directly in the style tag. Let’s see this technique in the following method.

Method 2: Use CSS Pseudo-Class Selector

Let’s look at another method to achieve our expected output using a better and more efficient code.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  th:nth-child(1)   width: 5%  >  th:nth-child(2)   width: 70%  >  th:nth-child(3)   width: 25%  >  style>  head>  body>  table>  tr>  th>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Let’s understand what we did in the code. A CSS selector matches every parent’s nth child element.

The CSS pseudo-class selector :nth-child(n) is used to compare elements based on where they are located in a pair of siblings. The n can be any number or a keyword like, odd or even.

We select the tag in the style tag and call the nth-child selector on it. The nth-chid(1) means it will select the ID column, nth-child(2) will select the Name column, and so on.

This way, you can customize the column’s width without assigning a class to each tag.

One more important point here is that if you specify the width of the ID and Age columns, there is no need to select the width percentage of the Name column as the remaining width will be assigned automatically to it, and it will give us the same result.

html>  head>  style>  table  width: 100%  >  table, th, td   border: 1px solid black;  border-collapse: collapse;  >  th:nth-child(1)   width: 5%  >  th:nth-child(3)   width: 25%  >  style>  head>  body>  table>  tr>  th>IDth>  th>Nameth>  th>Ageth>  tr>  tr>  td>1td>  td>Johntd>  td>25td>  tr>  tr>  td>2td>  td>Jacksontd>  td>40td>  tr>  table>  body>  html> 

Источник