Two-column fixed layout

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.

Источник

How to Create a Fixed-Width Layout with CSS

A «fixed-width» layout is one in which the layout of the page is contained within a wrapper that doesn’t adjust its size when the width of the browser changes.

In this how to, you’ll learn how to create a 2-column fixed-width layout.

1. Start with the following simple web page containing four content areas: header, footer, menu, and content.

        
 
Two-column fixed layout
 
 
 
Menu
 
This column is fixed.
 
This column is fixed.
 
This column is fixed.
 
This column is fixed.
 
This column is fixed.
 
 
Content
 
This column is fixed.
 
 
 
footer
 
   

 * < margin:0; padding:0; border:0; >#wrapper < border: 1px solid #000; width: 950px; margin: auto; >#header < border-bottom: 1px solid #000; padding: 10px; background-color: #eee; >#menu < width: 180px; float: left; padding: 10px; border-right: 1px solid #000; >#content < margin-left: 200px; border-left: 1px solid #000; padding: 10px; line-height: 2em; >.clearer

Open the HTML page in a browser. This code renders the following:

Related Articles

1. Learn the Very Basics of CSS in One Minute
2. How to Create a CSS External Style Sheet
3. How to Align Text with CSS
4. How to Create a Horizontal Navigation Menu with CSS
5. How to Create a Fixed-Width Layout with CSS (this article)
6. How to Remove Spacing Between Table Borders with CSS
7. How to Set a Background Image with CSS
8. How to Set Text Spacing and Placement in CSS
9. How to Style a Table with CSS
10. How to Create Boxes with Rounded Corners in CSS
11. How to Create a Vertical Navigation Menu with CSS
12. How to Use the CSS Opacity Property
13. How to Use Multiple Background Images with CSS
14. Absolute Positioning with CSS
15. How to Use the CSS Border Shorthand Property
16. How to Create CSS Button Links
17. How to Create a Fluid-Width Layout with CSS
18. How to Set Text and Background Color with CSS
19. How to Create a CSS Embedded Style Sheet
20. How to Add Inline Styles to CSS
21. How to Create a Border with CSS
22. How to Use the CSS Padding Shorthand Property
23. How to Create a Fly-Out Menu with CSS
24. How to Use CSS Media Queries in Responsive Design
25. How to Adjust Margins with CSS
26. How to Use the CSS Background Shorthand Property
27. How to Create a Form without Tables Using CSS
28. How to Modify Fonts in CSS
29. How to Create a Drop-Down Menu with CSS
30. How to Apply Padding with CSS
31. Fixed Positioning with CSS
32. How to Use CSS Transitions
33. How to Use the CSS list-style Shorthand Property
34. How to Change Text Style in CSS
35. How to Create CSS Sprites
36. How to Use CSS with Different Media Types
37. How to Import Style Sheets with @import in CSS
38. How to Use the CSS White-Space Property
39. How to Use the CSS Z-index Property
40. How to Create Drop Shadows with the box-shadow Property in CSS3

Training Options

Источник

How to Create a Fixed-Width Layout With CSS

The “fixed layout” is also referred to as a static layout and it is measured in “pixels”. This type of layout makes the width of the element fixed. Moreover, the fixed layout is programmed in a way that no matter the screen size or resolution, the element’s width will not change. It is beneficial for users who want to present consistent corporate images to all visitors.

This blog will demonstrate the procedure of creating a fixed-width layout with CSS.

How to Create Fixed-Width Layout Using CSS?

For the purpose of creating a fixed-width layout, firstly, inside the body element of the HTML, add a div element with a class name “fixed-width”. Then, add and

elements to add some content.

Welcome to Linuxhint < / h1 >

Linuxhint is the best online tutorial website. If you want to learn bash programming, you are in the right place. < / p >
< / div >

The markup structure has been completed and can be seen in the below-given image:

Now, let’s apply CSS styling properties to the above HTML elements.

Style All Elements

As we know, the fixed-width layouts use exact pixel width, so, the width property will be set in “pixels”. It defines that the element’s width will remain the same as in every screen size.

Style fixed-width div

.fixed- width {
background- color : rgb ( 238 , 238 , 238 ) ;
margin: auto;
max- width : 400px;
height : 100vh;
}

The “.fixed-width” is referring to the div class fixed-width. The following properties are applied to the div fixed-width:

• “background-color” specifies the color of the element’s background.
• “margin” specifies the space around the element.
• “max-width” sets the maximum width of the element.
• “height” property sets the element’s height.

The output of the mentioned code is displayed below:

It can be observed that the width of the div fixed-width is fixed. It does not change according to the screen sizes.

That’s how the fixed-width layout is created in CSS.

Conclusion

The fixed-width layouts set the width of the element fixed. They remain the same in every screen size. If the browser window’s width is less than the layout’s width, a horizontal scroll bar will appear, and the element’s width will not change. To make the layout fixed, the width of the element must be specified in “pixels”. With the help of a practical example, this blog has demonstrated how to create a fixed-width layout in CSS.

About the author

Sharqa Hameed

I am a Linux enthusiast, I love to read Every Linux blog on the internet. I hold masters degree in computer science and am passionate about learning and teaching.

Источник

How to Add a Fixed Width Column with CSS Flexbox

If you want to have a fixed-width column with Flexbox, you need to use the CSS flex or flex-basis property.

For both the «green» and «blue» classes, we set the flex to 1.

Example of setting a fixed-width column with Flexbox:

html> html> head> title>Title of the document title> style> .flexbox < display: flex; > .grey < background: #adadad; flex: 0 0 50px; > .green < background: #32c962; flex: 1; > .blue < background: #3b66db; flex: 1; > style> head> body> div class="flexbox"> div class="grey">1 div> div class="green">2 div> div class="blue">3 div> div> body> html>

Result

We’ve got a problem here! When the text in

is longer than the fixed width you’ve set, it will overflow and mess up the layout of the flexbox.

To fix this, you can add the overflow: hidden; and white-space: nowrap; CSS properties to the .grey class. This will prevent the overflow and keep the text on a single line.

html> html> head> title>Title of the document title> style> .flexbox < display: flex; > .grey < background: #adadad; flex: 0 0 50px; overflow: hidden; white-space: nowrap; > .green < background: #32c962; flex: 1; > .blue < background: #3b66db; flex: 1; > style> head> body> div class="flexbox"> div class="grey">Some really long text that should not overflow div> div class="green">2 div> div class="blue">3 div> div> body> html>

Now, even if the text in is longer than the fixed width of 50 pixels, it will not overflow and will stay on a single line.

Источник

How to set fixed width for in bootstrap?

To create a table add .table class to tag. Add header elements using > tag . tag denotes the head of the table. For adding contents use tag. The tag denotes the row of table.

          
 
Table Creation
 
 
 
#
 
Item
 
Description
 
status
 
 
 
 
1
 
Any item
 
Add long content to see variable width cell
 
Active
 
 
2
 
Any item 2
 
Add long content to see variable width cell
 
Disable
 
 
3
 
Any item 3
 
Add long content to see variable width cell
 
Active
 
 
 
 
  

          
 
Table Creation
 
 
 
#
 
Item
 
Description
 
status
 
 
 
 
1
 
Any item
 
Add long content to see variable width cell
 
Active
 
 
2
 
Any item 2
 
Add long content to see variable width cell
 
Disable
 
 
3
 
Any item 3
 
Add long content to see variable width cell
 
Active