Mobile Responsive Tables on COS pages

KadyWhite · ‎May 2, 2017

Hello!

I am working on some COS pages, and I have been building tables in the Rich Text editor, but they're not responsive on mobile (that is, the table isn't responsive, the rest of the page is). Any tips or good resources for fixing this? Is it as simple as changing the width property in the source code?

I am not the greatest coder, so any source code manipulations I need the "for dummies" explanation 🙂

Thanks in advance!

wspiro · ‎May 2, 2017

Hi Kady,

By their nature, a table with fixed pixel widths will not be responsive. You can either remove the pixel width declarations, or replace them with percentage widths to allow them to resize.

If any <table> tag (table wrapper), <tr> tag (table row) or <td> tag (table column) has a fixed width declaration, the table will not be responsive. These non-responsive html tags will look something like:

<table width="1000">
or
<td style="width: 300px;">
or
<tr style="width: 300px;">

A table or cell of a table will never be any more or less than the width and height declarations which are set. So if a table column is set to be 300px wide, it will always be 300px wide.

Here is an example of a non-responsive, 2 column table:

<table style="width: 600px;"> /* a table with a set width of 600px */
	<tr>
		<td style="width: 300px;">  /* 2 columns in this table row with set widths of 300px */
			This is some content
		</td>
		<td style="width: 300px;">
			This is more content
		</td>
	</tr>
</table>

The fixed pixel width values set in the <table> tag and <td> tags are not allowing the table to be any less than what is set. Rather, we want to set the width values to be relative to their container, which we can do with percentage values.

A responsive 2 column table table would look more like:

<table style="width: 100%;"> /* a table with a width of 100% */
	<tr>
		<td style="width: 50%;"> /* 2 columns in this table row with widths of half of the entire row */
			This is some content
		</td>
		<td style="width: 50%;">
			This is more content
		</td>
	</tr>
</table>

Notice the percentage width values. We are setting the <table> to have a width of 100%, which will fill 100% of the container it lives within. As this container resizes, the table will also resize to fit 100% of the container (the entire container). We are also setting the table columns width to be 50% (each cell takes up half of the table), so as the table resizes, this 50% will be relative to the size of the table and allow the cells to fit on a smaller screen size.

Note that the sum of the table columns equal 100%, so if you want a three column table acting responsive, it would have table columns with widths of 33%:

/* Example three column responsive table */
<table style="width: 100%;"> /* This is the table wrapper */
    <tr> /* This is a table row (tr) */
		<td style="width: 33%;">Column 1 Content</td> /* This is a table column (td) */
		<td style="width: 33%;">Column 2 Content</td>
		<td style="width: 33%;">Column 3 Content</td>
	</tr>
</table>

For the best compatibility, make sure you use CSS width declarations. This means using

<table style="width: 100%;"> 
/* rather than */
<table width="100%">

I hope this helps!

View solution in original post

stefen · ‎May 2, 2017

@KadyWhite In your stylesheet, be sure that tables are set to 100% width like so:

table {
  width: 100%;
}

However, this may not completely fix the issue depending on how much data is in the table. One of the easiest "one size fits all" solutions to making tables responsive is to just add a wrapper around your table like so:

<div class="responsive-table">
   <table>
     ...
   </table>
</div>

And in your css make horizontal overflow scroll:

.responsive-table {
  width: 100%;
  overflow-y: scroll;
}

Hope this helps!

Stefen Phelps, Community Champion, Kelp Web Developer

View solution in original post

stefen · ‎May 2, 2017

@KadyWhite In your stylesheet, be sure that tables are set to 100% width like so:

table {
  width: 100%;
}

However, this may not completely fix the issue depending on how much data is in the table. One of the easiest "one size fits all" solutions to making tables responsive is to just add a wrapper around your table like so:

<div class="responsive-table">
   <table>
     ...
   </table>
</div>

And in your css make horizontal overflow scroll:

.responsive-table {
  width: 100%;
  overflow-y: scroll;
}

Hope this helps!

hashackelford · ‎May 30, 2018

Thank you for the insight!

I might have misunderstood your answer or mis-applied your instructions, but I'm curious if you (or anyone else reading this :)) can help me.

I would like my two-column table to stack on mobile, creating one list, rather than to remain in two columns. Here is my current code for my table within the rich text module on the editing page:

<div class="responsive-table">
<table style="width: 100%;">
<tbody>
<tr>
<td style="width: 50%;">
<ul>
<li>Spending too much time going through resumes?</li>
</ul>
<ul>
<li>High employee churn?</li>
</ul>
<ul>
<li>Employees satisfaction low?</li>
</ul>
</td>
<td style="width: 50%px;">
<ul>
<li><span>Low productivity?</span></li>
</ul>
<ul>
<li><span>Feel like people are a black box?</span></li>
</ul>
<ul>
<li><span>Didn't get the person you hired?</span></li>
</ul>
</td>
</tr>
</tbody>
</table>
</div>

And I have added this code to the bottom of the stylesheet:

.responsive-table {
  width: 100%;
  overflow-y: scroll;
}

Am I missing or misunderstanding something to make the two columns change to one column on mobile?

Thank you!

*** EDIT ***

After re-reading the response, I understand that is to make it overflow ON the horizontal axis, rather than overflow to stack vertically. I'll play around with it to see what I can do; any help still welcomed in the meantime!

Blabberboy · ‎Jan 22, 2019

Like hashackelford, I'm also looking to stack the table on mobile, creating one list, rather than to remain in columns. Anyone got a solution? Media query?

wspiro · ‎May 2, 2017