Mobile-friendly HTML table. Variant 2

An HTML table with multiple columns and rows is reformatted into two column table to fit the available width. That is, hopefully to fit without horizontal scrolling.

HTML table before reformatting:

HTML table after reformatting:

HTML code:

<table>
	<tr>
		<th>01_TH_text</th>
		<th>02_TH_text</th>
		<th>03_TH_text</th>
		<th>04_TH_text</th>
		<th>05_TH_text</th>
		<th>06_TH_text</th>
		<th>07_TH_text</th>
		<th>08_TH_text</th>
		<th>09_TH_text</th>
		<th>10_TH_text</th>
	</tr>
	<tr>
		<td>1_TD_data_01</td>
		<td>1_TD_data_02</td>
		<td>1_TD_data_03</td>
		<td>1_TD_data_04</td>
		<td>1_TD_data_05</td>
		<td>1_TD_data_06</td>
		<td>1_TD_data_07</td>
		<td>1_TD_data_08</td>
		<td>1_TD_data_09</td>
		<td>1_TD_data_10</td>
	</tr>
	<tr>
		<td>2_TD_data_01</td>
		<td>2_TD_data_02</td>
		<td>2_TD_data_03</td>
		<td>2_TD_data_04</td>
		<td>2_TD_data_05</td>
		<td>2_TD_data_06</td>
		<td>2_TD_data_07</td>
		<td>2_TD_data_08</td>
		<td>2_TD_data_09</td>
		<td>2_TD_data_10</td>
	</tr>
	<tr>
		<td>3_TD_data_01</td>
		<td>3_TD_data_02</td>
		<td>3_TD_data_03</td>
		<td>3_TD_data_04</td>
		<td>3_TD_data_05</td>
		<td>3_TD_data_06</td>
		<td>3_TD_data_07</td>
		<td>3_TD_data_08</td>
		<td>3_TD_data_09</td>
		<td>3_TD_data_10</td>
	</tr>
	<tr>
		<td>4_TD_data_01</td>
		<td>4_TD_data_02</td>
		<td>4_TD_data_03</td>
		<td>4_TD_data_04</td>
		<td>4_TD_data_05</td>
		<td>4_TD_data_06</td>
		<td>4_TD_data_07</td>
		<td>4_TD_data_08</td>
		<td>4_TD_data_09</td>
		<td>4_TD_data_10</td>
	</tr>
</table>

CSS code:

/* The principal part of CSS */
table, tbody, tr, th, td {display: block;}
tr:first-of-type {position: absolute; top: -9999px; left: -9999px;}
td:before {content: attr(data-th-name);}

/* Styling the look */
tr{margin-bottom: 40px; border: 2px #000 solid;}
tr:last-of-type{margin-bottom: 0;}
tr:nth-of-type(even){background: #ddd;}
td{padding: 10px; text-align: right; border: 1px #000 solid; border-top: 0;}
td:first-of-type{border-top: 1px #000 solid;}
td:before{font-weight: bold; float: left;}

JavaScript / jQuery code:

jQuery(document).ready(function($) {
	$('.example2 table td').each(function(i){
		var th_text = $('.example2 table').find('th').eq($(this).index()).text();
		$(this).attr('data-th-name', th_text);
	});
});

The script gets text content from each <th> tag and creates data-th-name attributes in each corresponding <td> tag with text from the corresponding <th> tag as their content.

Browser support

Windows

Internet Explorer 8.0+

Firefox 1.0+

Google Chrome

Opera 7.5+

Safari 3.1+

SeaMonkey 1.0+

Mozilla 1.5+

Netscape 7.2+

Linux

Firefox 1.0+

Google Chrome / Chromium

Opera 7.5+

SeaMonkey 1.0+

Hv3

Mozilla 1.5+

Netscape 7.2+

More

• Mobile-friendly HTML table - 1
• Display DL like a table