Responsive table is hiding columns with no values - html

Question

On one of my pages, I have a responsive table that changes layout when the browser gets small. When the columns in my table have values, everything works correctly, as shown in this fiddle.
When the columns do not have values, however, some of them don't show up in the small-version of the table's layout, as shown in this fiddle.
What am I missing?
I have also copied the requisite code from the non-working version below:
#media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px) {
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
/* Hide table headers (but not display: none;, for accessibility) */
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr { border: 1px solid #ccc; }
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
/* Label the data */
td:nth-of-type(1):before { content: "MFG P/N"; }
td:nth-of-type(2):before { content: "MFG Name"; }
td:nth-of-type(3):before { content: "Part ID"; }
td:nth-of-type(4):before { content: "Description"; }
td:nth-of-type(5):before { content: "Cost"; }
td:nth-of-type(6):before { content: "Price"; }
td:nth-of-type(7):before { content: "On Hand"; }
td:nth-of-type(8):before { content: "On Order"; }
td:nth-of-type(9):before { content: "Allocated"; }
td:nth-of-type(10):before { content: "Shipped"; }
td:nth-of-type(11):before { content: "Report"; }
td:nth-of-type(12):before { content: "RMA"; }
td:nth-of-type(10):before { content: "File"; }
td:nth-of-type(10):before { content: "Add Part"; }
}

Answer 1

Your problem isn't exactly what you're describing. In looking at your table in the "non-working example" fiddle, the result does not show a series of empty table cells - it shows no table cells.
Instead, you are outputting:
<td valign="top" colspan="10" class="dataTables_empty">No data available in table</td>
You're using a fairly clever CSS trick to display the column text before each one of your cells - which I applaud you for - but my impression is that you don't really understand how the CSS trick works, which is why you're having the error. Let me break it down for you, so it makes sense.
Your CSS is based around using the selector :nth-of-type(N) to prepend some content in front of a <td>. You have 9 columns in your grid: Company, Cust.No, Contact, Address, Phone, Email, File, Created Date and Notes.
When your page gets below a certain width, based on your media query, the following things happen:
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
This block moves the <thead> tag, containing your table's column headers, off of the screen's visible space (10,000px above and to the left of the viewable area).
table, thead, tbody, th, td, tr {
display: block;
}
td {
/* Behave like a "row" */
border: none;
border-bottom: 1px solid #eee;
position: relative;
padding-left: 50%;
}
As the comment says, these blocks disable the default display: table CSS rendering of the table, and instead start forcing all of the elements contained therein to have block display - meaning that each new element will start on a new line by default. This is what causes your cells to appear on top of each other within a single row.
The padding-left: 50% on the <td> tags is what forces your data to display starting in the center of the table.
Now for the magic:
td:nth-of-type(1):before { content: "MFG P/N"; }
This line says... "for any <td> tag, if it is the (1)th <td> within its parent element, inject the text 'MFG P/N' into its :before pseudo-element."
The :before pseudo-element is a CSS construct which appears outside the DOM (you can't see it in the mark-up or by inspecting the page's elements) - but still renders on the screen. It renders inside the element it applies to (the <td>). The following CSS tells it how to display:
td:before {
/* Now like a table header */
position: absolute;
/* Top/left values mimic padding */
top: 6px;
left: 6px;
width: 45%;
padding-right: 10px;
white-space: nowrap;
}
In other words, within the position: relative <td> parent, position the :before pseudo-element 6px from the top edge, and 6px from the left edge, make it 45% as wide as the <td>, etc.
This is what injects the "header" in front of your rows.
Now for the problem:
Your HTML/JS is currently rendering the following HTML in your non-working example (simplified to show the important parts):
<table>
<thead><!-- omitted because it is off-screen --></thead>
<tbody>
<tr class="odd">
<td valign="top" colspan="10" class="dataTables_empty">
No data available in table
</td>
</tr>
</tbody>
</table>
Note that there is only one <td> inside your <tbody>. This is why you aren't displaying multiple rows with multiple prepended headers - there is only one <td> cell which your CSS is acting on.
If you want, instead, to display a series of empty boxes with the requisite header values, you will need to change the HTML output to the following:
<table>
<thead><!-- still omitted, because it still doesn't matter --></thead>
<tbody>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td><!-- 9 columns, to match your 9 headers -->
</tbody>
</table>
This will allow your CSS rules for the :nth-of-type(1) through :nth-of-type(9) to render the requisite headers properly, with the (non-breaking space) forcing the table to display the <td> tags in all browsers, by providing "invisible" content.
I hope this helps.
An additional note:
Your current CSS contains a bunch of junk that you don't need. Specifically:
td:nth-of-type(10):before { content: "Shipped"; }
td:nth-of-type(11):before { content: "Report"; }
td:nth-of-type(12):before { content: "RMA"; }
td:nth-of-type(10):before { content: "File"; }
td:nth-of-type(10):before { content: "Add Part"; }
The last 5 of your :nth-of-type rules. These will never be applied, using your current HTML layout - because you only have 9 columns in your table.
In addition - you have 3 separate rules that target :nth-of-type(10)... this means that even if you did have a 10th column, only the last of these rules ("Add Part") is going to be applied, as it will override both of the previous.