css - Making a large table base website mobile friendly -

we in process of making school website mobile friendly. http://as.sjsu.edu/ascr/index.jsp?val=fit_group site has lot of content different departments(hundreds of pages). content in tables. make mobile friendly i'm applying styles tables using max-width, min-width , float: left in order stack tables vertically when viewed in smaller screens. here example: http://as.sjsu.edu/cf/vaishak/responsivetables/table.html works well. however, site contains many different table layouts , have empty cells , columns being used create margins between cells content hard coded dimensions tables. use adobe contribute let different departments update content. need continue using contribute , supports tables editing.

any suggestions on how efficiently import content responsive layouts or how possibly deal content without having manually change source code on every page?

the process have in mind writing script rid of unnecessary cells , insert responsive css id/classes cells/tables content extremely challenging write algorithm identify cells needed , styles should inserted. don't seem find pattern on layouts able create such script.

any useful appreciated.

i suggest pick 1 solution following list of responsive data tables tricks:

http://exisweb.net/responsive-table-plugins-and-patterns

i summarized basic approach answer question there more sophisticated alternatives:

removing fixed widths markup

before:

 <table width="540">   <tr>     <td width="300">header 1</td>     <td width="60">header 2</td>     <td>header 3</td>     <td>header 4</td>   </tr> </table> 

after:

 <table>   <tr>     <td>header 1</td>     <td>header 2</td>     <td>header 3</td>     <td>header 4</td>   </tr> </table> 

the width attribute deprecated – better let browser size columns.

basic styling

table {     border-collapse: collapse;     border-spacing: 0;     border: 1px solid #bbb; } td,th {     border-top: 1px solid #ddd;     padding: 4px 8px; } 

optional striped rows

nth-child not supported ie8

tbody tr:nth-child(even)  td { background-color: #eee; } 

mobile-friendly table

note: it’s better syntax wrap table in div has overflow-x: scroll;

@media screen , (max-width: 640px) {     table {         overflow-x: auto;         display: block;     } }