http://sitesforprofit.com/responsive-tables-in-wordpress

Use WordPress? Do you have tables in your posts?

These can be tricky to edit as well as display properly on a mobile display.

I’ve already rounded up a bunch of possible solutions, but here I’m going to break it down further, and outline what I’ve been doing.

1. Adding and Editing Tables

If really want to understand HTML tables, read Chris Coyier’s comprehensive guide.

It is possible to add and edit a table in WordPress in the visual editor. To do this you need to activate the table button in the toolbar.

Do this by adding a plugin called MCE Table Buttons.

On the visual editor, make sure your click the rightmost icon (the toolbar toggle shows the enhanced toolbar).

Now the toolbar shows a second line – including a new TABLE button.

This button has a dropdown menu with a number of options for creating a table.

1. Insert the table according to the number of rows and columns you need.
2. Click in the first row. Then drill down the table button: Row / Table Row Properties. Set the Row Type to header.
3. Select the first row. Using the table button: Cell / Table Cell Properties. Set the Cell Type to Header cell.

Don’t drag the table to resize it. This will add in fixed widths which will not go well on a responsive site.

This will give us a semantically correct table. The source looks like this:

<table>
<thead>
<tr>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Formatting the Table

All formatting should be done with CSS. Your table should not contain widths in the HTML or other formatting markup.

Most themes will have their default table styles. From here you can either edit the theme CSS. Or, add your extra table CSS into the Custom CSS box on your theme options (most commercial themes have this).

Beverage	Short caffeine	Tall caffeine	Grande caffeine	Venti caffeine
Brewed Coffee	180mg	260mg	330mg	415mg
Brewed Decaf Coffee	15mg	20mg	25mg	30mg
Caffè Americano	75mg	150mg	225mg	300mg
Caffè Latte	75mg	75mg	150mg	150mg

Some of the more common formatting you might want:

Striped Rows
tbody tr:nth-of-type(2n) {background-color: #f0f0f0;}

Nice Heading Row
th {background-color:#018DB1;font-weight:bold;color:#fff;}

Bolded First Column
tbody tr td:nth-of-type(1) {font-weight: bold;}

Formatting for Mobile Layouts

Set a media breakpoint in your CSS according to your design. In this example any layouts narrower than 600px will get the mobile optimized table.

You can resize your browser to see this in action. I’ve pasted a screen capture to show you.

@media screen and (max-width: 600px) {
table {width:100%;}
thead {display: none;}
tr:nth-of-type(2n) {background-color: inherit;}
tr td:first-child {background: #f0f0f0; font-weight:bold;font-size:1.3em;}
tbody td {display: block;  text-align:center;}
tbody td:before { 
    content: attr(data-th); 
    display: block;
    text-align:center;  
  }
}

Getting Column Headings to Appear in Each Cell

Props to Dudley Story. This code has been adapted from that example.

We need to go through each table and extract out heading text. Then concatenate this into each cell.

jQuery is not required. This code must be placed before the </body> tag, but make sure it is after the content of your page. Many themes also have this as an option.

<script>
var headertext = [];
var headers = document.querySelectorAll("thead");
var tablebody = document.querySelectorAll("tbody");

for (var i = 0; i < headers.length; i++) {
	headertext[i]=[];
	for (var j = 0, headrow; headrow = headers[i].rows[0].cells[j]; j++) {
	  var current = headrow;
	  headertext[i].push(current.textContent);
	  }
} 

for (var h = 0, tbody; tbody = tablebody[h]; h++) {
	for (var i = 0, row; row = tbody.rows[i]; i++) {
	  for (var j = 0, col; col = row.cells[j]; j++) {
	    col.setAttribute("data-th", headertext[h][j]);
	  } 
	}
}
</script>

That’s about it.

You don’t have to use large jquery plugins.