Fixed layout table ignores min-width of cells

HTML & CSS
1

Is there a workaround to this problem? Apparently the browser (Safari, in my case) ignores the min-width for table cells when the table is set to a fixed layout. Please assist. Thank you.
e.g. http://wearabletechforums.com/v2/compare.php?vs=surge&vs=vivoactive&vs=gear2&vs=gearLive&vs=activite

table#comparison { width: 100%; padding: 0; border-spacing: 0; border-collapse: separate; table-layout: fixed; } table#comparison th, table#comparison td { max-width: 250px; min-width: 80px; text-align: center; } table#comparison th { overflow: hidden; }

[code]

Compare Fitbit Surge vs. Garmin Vívoactive vs. Samsung Gear 2 vs. Samsung Gear Live vs. Withings Activité 
<div id="bar-container">
	<div id="bar">
	</div>
</div>

<div id="header-container">
	<div id="header">
	</div>
</div>

<div id="container">
	<div id="container-page">
					<div id="main">	<div class="breadcrumb">
	<i class="fa fa-location-arrow"></i>
	<span class="breadcrumb-bit home" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="select.php" itemprop="url"><span itemprop="title">Compare Wearables</span></a></span>
				<i class="fa fa-chevron-right"></i>
		<span class="breadcrumb-bit"><span class="like-a">Smartwatches</span></span>
				<i class="fa fa-chevron-right"></i>
	<span class="breadcrumb-bit end" itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="compare.php?vs=surge&amp;vs=vivoactive&amp;vs=gear2&amp;vs=gearLive&amp;vs=activite" itemprop="url"><span itemprop="title">Fitbit&nbsp;Surge&nbsp; vs.&nbsp;&nbsp;Garmin&nbsp;V&iacute;voactive&nbsp; vs.&nbsp;&nbsp;Samsung&nbsp;Gear&nbsp;2&nbsp; vs.&nbsp;&nbsp;Samsung&nbsp;Gear&nbsp;Live&nbsp; vs.&nbsp;&nbsp;Withings&nbsp;Activit&eacute;</span></a></span>
</div>

	<div class="sB block small orange margin-top max480">
	<i class="fa fa-exclamation-triangle"></i><strong>The wearables comparison table is optimized for a large-screen experience.</strong>
	Consider bookmarking this page to view it later on a larger screen.
</div>

	<div id="table-comparison">
		<table id="comparison" cellpadding="0" cellspacing="0">

	<tr class="img"><td>&nbsp;</td><td><img src="/images/compare-surge.jpg" alt="Fitbit Surge"></td><td><img src="/images/compare-vivoactive.jpg" alt="Garmin V&iacute;voactive"></td><td><img src="/images/compare-gear2.jpg" alt="Samsung Gear&nbsp;2"></td><td><img src="/images/compare-gearLive.jpg" alt="Samsung Gear&nbsp;Live"></td><td><img src="/images/compare-activite.jpg" alt="Withings Activit&eacute;"></td></tr>
	<tr id="products"><th width="16.67%"><div class="sticky sticky-th"></div></th><th width="16.67%"><div class="sticky"><div class="brand">Fitbit</div><div class="product">Surge</div><div class="price">$249.95</div><div class="remove"><a href="compare.php?vs=vivoactive&amp;vs=gear2&amp;vs=gearLive&amp;vs=activite" class="sB tiny red-border bold round">&#8856; Remove</a></div><th width="16.67%"><div class="sticky"><div class="brand">Garmin</div><div class="product">V&iacute;voactive</div><div class="price">$249.99</div><div class="remove"><a href="compare.php?vs=surge&amp;vs=gear2&amp;vs=gearLive&amp;vs=activite" class="sB tiny red-border bold round">&#8856; Remove</a></div><th width="16.67%"><div class="sticky"><div class="brand">Samsung</div><div class="product">Gear&nbsp;2</div><div class="price">$299.99</div><div class="remove"><a href="compare.php?vs=surge&amp;vs=vivoactive&amp;vs=gearLive&amp;vs=activite" class="sB tiny red-border bold round">&#8856; Remove</a></div><th width="16.67%"><div class="sticky"><div class="brand">Samsung</div><div class="product">Gear&nbsp;Live</div><div class="price">$199.99</div><div class="remove"><a href="compare.php?vs=surge&amp;vs=vivoactive&amp;vs=gear2&amp;vs=activite" class="sB tiny red-border bold round">&#8856; Remove</a></div><th width="16.67%"><div class="sticky"><div class="brand">Withings</div><div class="product">Activit&eacute;</div><div class="price">$450</div><div class="remove"><a href="compare.php?vs=surge&amp;vs=vivoactive&amp;vs=gear2&amp;vs=gearLive" class="sB tiny red-border bold round">&#8856; Remove</a></div></div></th></tr>
	<tr class="table-specs "><td class="fieldName"><span>Release</span></td><td class="neutral"><span>Jan 2015</span></td><td class="neutral"><span>Jan 2015</span></td><td class="neutral"><span>Apr 2014</span></td><td class="neutral"><span>June 2014</span></td><td class="neutral"><span>Nov 2014</span></td></tr>
	<tr class="table-category"><td colspan="6">Activity Tracking</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Calories</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Distance</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Heart rate</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Sleep</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Steps</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="neutral"><span></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Swim</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Perspiration</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-category"><td colspan="6">Battery</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Duration</span></td><td class="neutral"><span>7 days</span></td><td class="neutral"><span>3 weeks<br>(10 hours with GPS)</span></td><td class="neutral"><span>2-3 days</span></td><td class="neutral"><span>1 day</span></td><td class="neutral"><span>8 months</span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Rechargeable</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-category"><td colspan="6">Compatability</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Android</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="neutral"><span>Coming soon</span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>iOS</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Mac</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Windows</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td><td class="NA"><span>n/a</span></td></tr>
	<tr class="table-category"><td colspan="6">Connectivity</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Bluetooth</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Cellular</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>GPS</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>NFC</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Wi-Fi</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-category"><td colspan="6">Display</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Color</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Resolution</span></td><td class="neutral"><span></span></td><td class="neutral"><span>205 x 148</span></td><td class="neutral"><span>320 x 320</span></td><td class="neutral"><span>320 x 320</span></td><td class="NA"><span>n/a</span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Size</span></td><td class="neutral"><span>1.26 inches</span></td><td class="neutral"><span>1.38 inches</span></td><td class="neutral"><span>1.63 inches</span></td><td class="neutral"><span>1.63 inches</span></td><td class="neutral"><span>1.3 inches, round</span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Touch</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Type</span></td><td class="neutral"><span>Monochrome LCD</span></td><td class="neutral"><span>LCD</span></td><td class="neutral"><span>Super AMOLED</span></td><td class="neutral"><span>Super AMOLED</span></td><td class="neutral"><span>Analog</span></td></tr>
	<tr class="table-category"><td colspan="6">Functions</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Audio</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="neutral"><span>via Bluetooth headset</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Clock</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Phone calls</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Vibrating alarm</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="neutral"><span></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Voice control</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td></tr>
	<tr class="table-category"><td colspan="6">Hardware</td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Accelerometer</span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td><td class="Yes"><span><i class="fa fa-check fa-lg"></i></span></td></tr>
	<tr class="table-specs "><td class="fieldName"><span>Camera</span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="No"><span><i class="fa fa-close fa-lg"></i></span></td><td class="neutral"><span>2.1-megapixel still,<br>

720p video
UV sensor
Water resistance5 ATM5 ATMIP67IP675 ATM
Notifications
Caller ID
Email
SMS/text
Software
App downloads
Messaging
Music controls
Syncing
USB data
Wireless

		</table>
	</div>

</div>
<div id="column2">
	<div class="column2-section">
	</div>
	<div class="column2-section">
	</div>
	<div class="column2-section">
	</div>
</div>

		</div>			
	</div>
</div>

<div id="footer-container">
	<div id="footer">
		<div class="category randomLinks">
			<div class="category-heading">
				<strong>Random Comparisons</strong>
			</div>

			<a href="compare.php?vs=smartbandTalk&amp;vs=smartwatch" class="randomLink"><i class="fa fa-random"></i> Sony SmartBand&nbsp;Talk<span class="vs"> vs. </span> Sony Smartwatch&nbsp;3</a>

Apple Watch vs. Samsung Gear Fit vs. Sony SmartBand
LG G Watch vs. Misfit Flash vs. Samsung Gear Fit vs. Sony SmartBand
Garmin Vívosmart vs. Jawbone UP Move vs. LG G Watch R vs. Misfit Flash vs. Samsung Gear Live
Apple Watch vs. Fitbit Surge vs. LG G Watch vs. LG G Watch R vs. Samsung Gear 2 vs. Samsung Gear S

		</div>
	</div>
</div>

<div id="footer2-container">
	<div id="footer2">
	</div>
</div>
[/code]
2

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

There is nothing abnormal to work around.

3

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.

4

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

5

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.

6

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.

7

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.

8

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)?

9

There’s only one < table >:

850×551 146 KB

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.

10

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.

11

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.)

12

What do you mean by this?

13

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.

14

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{table-layout:auto}
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.

15

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.

http://wearabletechforums.com/dev/wearables/?vs=charge&vs=chargeHR&vs=flex&vs=one&vs=surge&vs=zip

Thanks!

16

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; }

17

Look at this rule.

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

Sigh. Thank you. Typos are the worst.

Okay, now any idea why I can’t get the scrollable table to work?
http://wearabletechforums.com/dev/wearables/?vs=charge&vs=chargeHR&vs=flex&vs=one&vs=surge&vs=zip

/* 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 element.data('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()) { element.data('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()) { element.data('scrollWrapper').addClass('has-scroll'); } else { element.data('scrollWrapper').removeClass('has-scroll'); } }); }); }); </script>

19

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

20

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; }