Css table column width fix

HTML: Make table column width fixed

I have a HTML Table with a very large number of columns. Now, I want to be able to specify the width of the columns — The first column should be of 600px and every corresponding column should be of the width of 200px . Currently, what happens is that all the columns get cramped into the width of my screen instead of being 200px wide and allowing me to scroll. I’m using HTML_Table This is my code:

   #table_format < border-collapse: collapse; font-family: Helvetica, Arial, sans-serif; font-size: 16px; font-style: normal; border: 1px solid black; overflow-x: auto; >#table_format th < padding: 5px; font-size: 1.2em; text-align: left; border-bottom: 1px solid black; background-color: #F2C545; >#table_format td . Some other code here . "table_format")); $firstColumnStyle=array('width' => '600'); $subsequentColumnStyle=array('width' => '200'); . . Other code to print values here . . $table->updateColAttributes(0, $firstColumnStyle, null); for ($cols = 1; $cols updateColAttributes($cols, $subsequentColumnStyle); > echo $table->toHtml(); 

When I inspect element, I am able to see that the first column has a width of 600 and all others have 200. But the width isn’t actually getting reflected when I render the page. I don’t want to put the table in a wrapper and set the wrapper’s width to a static value because of these two reasons:

1. I don't know how many columns I have. 2. The scrollbar in the wrapper appears at the very bottom after all the rows, and to access the scrollbar, one needs to scroll to the very bottom. I'd rather have the horizontal scroll on the page rather than on the wrapper 

Источник

Fixed column width in HTML table

The problem is, when the contents in the second column of any row are slightly large, the width of the second column exceeds 150px, and to compensate the width of the first column reduces. How can I prevent that from happening. I want to widths to not change, and if the contents in any particular cell are too large to fit, the height should increase to accomodate.

Specify a width for the table itself, that should equal the total of all the individual widths. Keep in mind that even the border width (e.g. 1px) will need to be factored into the total width. But if the cell contains a lengthy string without spaces, it will mess up the table layout a bit because there is no opportunity to wrap. overflow:hidden as suggested by #batbaatar is a good idea.

5 Answers 5

you should try this CSS instruction:

that works in many browsers (yes, including IE 6, even IE 5.5 but not Fx 3.0. It’s only recognized by Fx3.5+. Also good for Saf, Chr and Op but I don’t know the exact version for these ones) and don’t do any harm in the other ones.

If table’s width is still messed up, there is also:

that will force the browser to use the other table algorithm, the one where it doesn’t try to adapt many situations including awkward ones but stick to what the stylesheet says.

You can try word-wrap:break-word;

About the Property

This property specifies whether the current rendered line should break if the content exceeds the boundary of the specified rendering box for an element (this is similar in some ways to the ‘clip’ and ‘overflow’ properties in intent.) This property should only apply if the element has a visual rendering, is an inline element with explicit height/width, is absolutely positioned and/or is a block element.

Источник

Force table column widths to always be fixed regardless of contents

I have an html table with table-layout: fixed and a td with a set width. The column still expands to hold the contents of text that doesn’t contain a space. Is there a way to fix this other than wrapping the contents of each td in a div? Example: http://jsfiddle.net/6p9K3/29/

 
 
 
Test
 
Testing 1123455
 
 
AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
 
B
 
 
 
 table < table-layout: fixed; >td

In the example, you can see that the column with AAAAAAAAAAAA. expands despite being explicitly set to 50px wide.

8 Answers 8

Specify the width of the table:

This works, but why is it necessary? Why does table-layout: fixed; allow content to override the fixed width of each column in the first place?

If you don’t want the content to be trimmed, at least you can make a scrollable cell: stackoverflow.com/a/11810223/4513925

Try looking into the following CSS:

Web browsers should not break-up «words» by default so what you are experiencing is normal behaviour of a browser. However you can override this with the word-wrap CSS directive.

You would need to set a width on the overall table then a width on the columns. «width:100%;» should also be OK depending on your requirements.

Using word-wrap may not be what you want however it is useful for showing all of the data without deforming the layout.

Источник

Set the table column width constant regardless of the amount of text in its cells?

In my table I set the width of the first cell in a column to be 100px .
However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px . How could I disable this expansion?

In my case not expansion happened, but the opposite: unwanted shrink of width despite of my explicit width declaration. Ridiculous!

18 Answers 18

I played with it for a bit because I had trouble figuring it out.

You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed . For some reason, the cell width seems to only stay fixed if the table width is set, too (I think that’s silly but whatev).

Also, it is useful to set the overflow property to hidden to prevent any extra text from coming out of the table.

You should make sure to leave all of the bordering and sizing for CSS, too.

 
 
header 1
 
header 234567895678657
 
 
data asdfasdfasdfasdfasdf
 
data 2
 
 

Its important to notice this: «The browser will then set column widths based on the width of cells in the first row of the table», from stackoverflow.com/questions/570154/…

It does work when the table width is not fixed. jsfiddle.net/lavinski/CGCFW/3 You just need a dynamic row to take up the remaining space.

@DanielLittle alternatively you can set the table width to 1px; with overflow: visible for tables of dynamic size, as long as the size of the cells is fixed and overflow is visible it doesn’t matter if the size of the table itself is bigger or smaller than the actual cells.

If the table has a width , even using table-layout: fixed the columns width will not be fixed because some columns will get enlarged to fill the table width, if the sum of all columns width is less than the table width. To avoid that you need what @MitjaGustin answer below suggests. However, if you specify the width of all columns then there is no point in also specifying the table width.

After the table tag, use the col element. you don’t need a closing tag.

For example, if you had three columns:

@Sam you may have had some other issue overriding this such as CSS, inline style, or incorrect doctype etc.. This definitely works, its the standard way to set column styles.

I’m not sure if this is the ‘HTML5 way’ at all. It appears that colgroup/col in html5 is only really used for marking spans. MDN makes no mention of the use of the style attribute on col tags (other than it inherits it from global attributes) and only says of bgcolor: «. use the CSS property. on the relevant

elements.» developer.mozilla.org/en-US/docs/Web/HTML/Element/col.

It’s not end-all/definitive, but w3schools also does not mention the use of col for this. It suggests the use of css applied to a

(or a ) — w3schools.com/tags/att_td_width.asp

@Hyathin Your solution worked like a charm for me (thank you) — no extra efforts required. But it may differ for others depending on their situations. Or, maybe HTML5 is more stable now in 2017.

I combined this solution with also specifying min-width/max-width for the same pixels width just to be on the safe side. Finally it’s working. I don’t know why I have to run all of these extra rounds just get it really fixed, ridiculous.

Ridiculous, but for me the easiest working solution in combination with display:inline-block; word-break:break-word; .

If you need one ore more fixed-width columns while other columns should resize, try setting both min-width and max-width to the same value.

You need to write this inside the corresponding CSS

It sounds little bit repetitive but it gives me the desired result. To achieve this with much ease, you may need put the CSS values in a class in your style-sheet:

This was the only solution that seemed to work in all cases without imposing extra, potentially-unwanted restrictions.

As per my answer here, it is also possible to use a table head (which can be empty) and apply relative widths for each table head cell. The widths of all cells in the table body will conform to the width of their column head. Example:

 
 
 
1
 
Some text.
 
May 2018
 
Edit
 
 
2
 
Another text.
 
April 2018
 
Edit
 
 
 
 

Alternatively, use colgroup as suggested in Hyathin’s answer.

.app_downloads_table tr td:first-child < width: 75%; >.app_downloads_table tr td:last-child

Should we set the table-layout: fixed; or display: table; for the table element in order for this td:first-child and nth-child(n) selector to work?

If you don’t want a fixed layout, specify a class for the column to be size appropriately.

It also helps, to put in the last «filler cell», with width:auto. This will occupy remaining space, and will leave all other dimensions as specified.

Make the accepted answer respond for small screens when smaller than the fixed width.

 
 
header 1
 
header 234567895678657
 
 
data asdfasdfasdfasdfasdf
 
data 2
 
 
 

KAsun has the right idea. Here is the correct code.

 th.first-col > div, td.first-col > div 
really long header
 
really long text
 
 

I use an ::after element in the cell where I want to set a minimal width regardless of the text present, like this:

I don’t have to set width on the table parent nor use table-layout.

If you have a limited access to the table, using a class or inline style could be complicated.

Alternatively your can target the first td and th child of each row (aka the first column)

The rule bellow worked for me when I tested it with width but didn’t work with max-width for some reason:

thead, tbody tr < display:table; width:100%; table-layout:fixed; >tr th:first-child, tr td:first-child

Getting proper sizing on a table is tricky. The only approach that has really worked for me is using table-layout: fixed; in combination with specified widths on each th . And a width: auto; on the one column you wouldn’t mind growing.

Here’s an example using a classless table. A classed version would be need if you’re doing some dynamic columns.

table < table-layout: fixed; >th,td < text-align: left; vertical-align: top; /* use this in the columns where you're not concerned with new lines */ word-break: break-word; >th:first-child, th:last-child < width: 5ch; text-align: center; >th:nth-child(n + 2):nth-child(-n + 3) < background: red; width: 25%; >th:nt-child(4)

 
 
 
ID
 
First Name
 
Last Name
 
Description
 
Age
 
 
 
 
1
 
John
 
Smith
 
Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a
 
30
 
 
2
 
John
 
Smith
 
Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a
 
30
 
 
3
 
John
 
Smith
 
Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a
 
30
 
 
4
 
John
 
Smith
 
Vivamus fermentum elit purus, eget egestas nunc convallis ac. Vestibulum faucibus dolor nunc, vitae rutrum mauris porta at. Ut id ante quis lectus consectetur interdum vel in leo. Ut ut convallis ipsum, quis aliquet erat. Maecenas ipsum dolor, rhoncus et ultrices a
 
30
 
 
 

Источник

How to give fixed width for the columns inside table in HTML?

P.S : Please don’t mark as duplicate until you have read the entire question I have a table where in I want to give fixed width to the columns as I want to display them dynamically. The width of the table is 100%. So in that table , only 1 column or 3 or 6, etc can be displayed. But the problem is if in a scenario I have only 1 column the data in that table occupies the entire 100% table even though i have given fixed width to the column. I want the column width to be fixed irrespective of the table width. Please guide where I am wrong. Below is the code I have been trying.

 
    
First Column
 
Second Column
 
Third Column
 
 
Text 1
 
text 2
 
text 3
 
 

@Mr_Green : But the problem is the data occupies the entire 100% of the table even though i have given fixed width of 100px or 50 px or so on

@Shirish: Your are getting issue with table width «100%». you can fix this issue using fixed width (i.e. 400px) instead of using percentage.

Those widths are calculated relative to each other. So 100 , 50 and 50 means the 2nd and 3rd are half the width of the 1st. For instance 28 , 14 and 14 will give the same result, switching px to % or pt or whatever doesn’t matter either (there seem to be some rounding errors when using float values or table_width:100% , but that’s about it). All columns combined will always fill the entire with of the table, that’s just how tables are designed to behave.

Источник