Fixed layout table ignores min-width of cells

The behavior that you are describing is NORMAL, expected table behavior.

There is nothing abnormal to work around.

with a fixed layout all the cells have a fixed width and so there can’t be a min or max width that differs from that as then you’d have one cel with two different widths at the same time.

Is there no way to make the table render with evenly spaced columns, minimum width cells, with overflow: hidden?

Evenly spaced columns? Yes, {border-spacing: nnpx 0;} (But I don’t think that’s what you really mean.)

Same width cells? {table-layout:fixed;} supply the same percent width to all of the cells.
The idea behind {table-layout:fixed} is that the content of the cells will not affect their width, which is the opposite of “normal” table cell behavior.

Don’t know if {overflow:hidden;} on an HTML table cell is in the specs.

Code up a little table and try a few styles to see how they work.

You can’t have a min-width on a cell when they are all even width cells because that isn’t logical as all cells are the same width in the table-layout:fixed algorithm. You can’t have the cells all at even widths except for one or two :smile: You could put a min-width on the table.

Overflow:hidden on the cell will work on the table-layout:fixed algorithm but not in the auto algorithm as cells always fit their content.

Perhaps you can explain what the problem is that you are trying to overcome. If it is the smaller screen layout then perhaps you need to do a table scroll like this.

I do understand all this. However if you look at the link you will see why this is not illogical. I have a table with a responsive wisth, with a dynamically determined number of columns, and with content that may vary slightly in width.

It’s illogical in the fact that the algorithm can’t have equal widths except where you don’t want them:)

Which table are we looking at as there are loads of tables on that page? They looked pretty much ok to me except that I would have linearized then on small screens and moved them to the left.

What are the exact issues that you want to overcome and when do they exhibit a problem (e.g. small screen or large screen)?

There’s only one < table >:

Here’s the problem, which happens when they get smushed. This is with fixed width layout:

This is with minimum cell width:

In #1, the columns get too small… In #2, notice that the Smartband Talk image is larger than the others, because its column is wider.

So when the overall width available is too small to fit equal width columns do you want the columns to stay equal but parts of the info get chopped off or do you want the columns to no longer keep equal widths and allow those with narrower content to get smaller. A third alternative is to not allow the table to get narrower than the width required to keep the columns equal width and not chop off any content - which will then require a horizontal scroll.

I’m okay with a horizontal scroll. The columns must always be uniform width, and I also want to be able to set a minimum width on the columns. (The first column with the labels can be a different width, but that’s not essential.)

What do you mean by this?

Get rid of the table and place what was the content of a column under neath the content of what was the column immediately to its left.

The content is then linear instead of tabular.

Again that’s a contradiction on how tables work and you either have them the same width or you don’t (or you specify the width for each cell). If they are equal then they can’t have a min-width as such -that’s just a limitation of that algorithm.

To make the min-width work you would need the auto algorithm but then cells would space as required (or put a min-width on the table).

e.g. This looks ok to me

table#comparison th, table#comparison td {      
min-width: 80px !important;

The !important is needed because of your inline widths.

Have a look at the link I gave in post #6 for another method which allows for the table to scroll but requires a little js…

It’s a step too far for you now (and perhaps that table is too complicated anyway for this with its dynamic content) but I would have organized it so that for small screen you had one item across and then the details for just that one item below it vertically.

Perfect! I was able to do this by setting a minimum width on the table. I gave the table a class containing the number of columns (via PHP) and set the minimum width for each possibility with CSS. Worked perfectly. Thank you!

I also really like the scrolling table. I will take a look. I do not wish to have the table collapse, as the side-by-side is integral to my website.


Oh, no. I spoke too soon. It actually doesn’t work. What is wrong with this?

/* TABLE WIDTH */ table.columns-2 { min-width: 160px; } table.columns-3 { min-width: 240px; } table.columns-4 { min-width: 320px; } table.columns-5 { min-width: 400px; } table.columns-6 { min-width: 480px; } table.columnsb-7 { min-width: 560px; }

Look at this rule.

table.columnsb-7 {
	min-width: 560px;

Sigh. Thank you. Typos are the worst.

Okay, now any idea why I can’t get the scrollable table to work?

/* TABLE SCROLL */ .scrollable { overflow-x: auto; } .scrollable.has-scroll { position: relative; overflow: hidden; /* Clips shadow created with pseudo-element the next rule. Not necessary for actual scrolling. */ } .scrollable.has-scroll:after { position: absolute; top: 0; left: 100%; width: 50px; height: 100%; border-radius: 10px 0 0 10px / 50% 0 0 50%; box-shadow: -5px 0 10px rgba(0, 0, 0, 0.25); content: ''; } .scrollable.has-scroll > div { /* This is the element whose content will be scrolled if necessary */ overflow-x: auto; } .scrollable > div::-webkit-scrollbar { height: 12px; } .scrollable > div::-webkit-scrollbar-track { box-shadow: 0 0 2px rgba(0,0,0,0.15) inset; background: #f0f0f0; } .scrollable > div::-webkit-scrollbar-thumb { border-radius: 6px; background: #ccc; }

<script> // FOR TABLE SCROLL $(window).on('load', function() { // Check all tables. You may need to be more restrictive. $('table').each(function() { var element = $(this); // Create the wrapper element var scrollWrapper = $('<div />', { 'class': 'scrollable', 'html': '<div />' // The inner div is needed for styling }).insertBefore(element); // Store a reference to the wrapper element'scrollWrapper', scrollWrapper); // Move the scrollable element inside the wrapper element element.appendTo(scrollWrapper.find('div')); // Check if the element is wider than its parent and thus needs to be scrollable if (element.outerWidth() > element.parent().outerWidth()) {'scrollWrapper').addClass('has-scroll'); } // When the viewport size is changed, check again if the element needs to be scrollable $(window).on('resize orientationchange', function() { if (element.outerWidth() > element.parent().outerWidth()) {'scrollWrapper').addClass('has-scroll'); } else {'scrollWrapper').removeClass('has-scroll'); } }); }); }); </script>

Try adding table-layout:fixed to table#comparison.

It is./* TABLE */ table#comparison { width: 100%; padding: 0; border-spacing: 0; border-collapse: separate; table-layout: fixed; } table#comparison th, table#comparison td { text-align: center; } table#comparison th { overflow: hidden; } table#comparison #products { line-height: 1.9rem; } table#comparison .table-specs td { padding: 5px 0; border-bottom: 1px dotted #CCC; } table#comparison tr .fieldName { text-align: left; font-weight: 600; }

Where is it on your live copy?

table#comparison {
	width: 100%;
	padding: 0;
	border-spacing: 0;
    border-collapse: separate;