Responsywna tabela Opcje

[kubax33]

Mam taką responsywną tabelę wszytko ładnie działa jednak problem pojawia się kiedy chcę ją użyć dla innych stron gdzie są inne nazwy "<th></th>". Chciałbym, aby w jednej tabeli było<th>Login</th> a w całkiem innej <th>Nazwisko</th>. Czy może tutaj trzeba użyć jakieś osobnego class do tabeli z td:nth-of-type(1):before ? Nie chciałbym tworzyć np. #tab_res2 bo to bez sensu. Jak to ugryźć?

[HTML] pobierz, plaintext 
 
#tab_res table { 
	width: 100%; 
	text-align: center;
	margin-top: 20px;
}
#tab_res thead tr { 
	background: #fff;
}
#tab_res td, th {
	padding: 3px;
}
 
@media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  {
 
#tab_res .akcje {
	background: #ccc;
	color: #ccc;
}
 
#tab_res table, thead, tbody, th, td, tr { 
	display: block; 
}
#tab_res thead tr { 
	position: absolute;
	top: -9999px;
	left: -9999px;
}
 
#tab_res tr { 
	border: 1px solid #ccc; 
}
 
#tab_res td { 
	border: none;
	border-bottom: 1px solid #e8e8e8; 
	position: relative;
	padding-left: 50%; 
	background: #fff;
}
 
#tab_res td:before { 
	position: absolute;
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 10px; 
	white-space: nowrap;
}
 
#tab_res td:nth-of-type(1):before { content: "Login"; line-height: 8px;}
#tab_res td:nth-of-type(2):before { content: "Imię"; line-height: 8px;}
#tab_res td:nth-of-type(3):before { content: "Miejcowość"; line-height: 8px;}
#tab_res td:nth-of-type(4):before { content: "Kod pocztowy"; line-height: 8px;}
 
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id='tab_res'> 
<table>
	<thead>
	<tr>
		<th>Login</th>
		<th>Imię</th>
		<th>Miejcowość</th>
		<th>Kod pocztowy</th>
	</tr>
	</thead>
 
<tbody>
	<td>xxx</td>
	 <td>xxx</td>
	<td>xxx</b></td>
	<td>xxx</td>
</tbody>
 
</table>
 
</div>
[HTML] pobierz, plaintext 

[aniolekx]

polecam http://getbootstrap.com/, może ci się spodoba

[kubax33]

Rozwiązałem to kolejnym divem innego wyjścia nie widzę choć zapewne idzie to zrobić lepiej.

[HTML] pobierz, plaintext 
 
#tab_res table { 
	width: 100%; 
	text-align: center;
	margin-top: 20px;
}
#tab_res thead tr { 
	background: #fff;
}
#tab_res td, th {
	padding: 3px;
}
 
@media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  {
 
#tab_res .akcje {
	background: #ccc;
	color: #ccc;
}
 
#tab_res table, thead, tbody, th, td, tr { 
	display: block; 
}
#tab_res thead tr { 
	position: absolute;
	top: -9999px;
	left: -9999px;
}
 
#tab_res tr { 
	border: 1px solid #ccc; 
}
 
#tab_res td { 
	border: none;
	border-bottom: 1px solid #e8e8e8; 
	position: relative;
	padding-left: 50%; 
	background: #fff;
}
 
#tab_res td:before { 
	position: absolute;
	top: 6px;
	left: 6px;
	width: 45%; 
	padding-right: 10px; 
	white-space: nowrap;
}
 
#tab_res td:nth-of-type(1):before { content: "Login"; line-height: 8px;}
#tab_res td:nth-of-type(2):before { content: "Imię"; line-height: 8px;}
#tab_res td:nth-of-type(3):before { content: "Miejcowość"; line-height: 8px;}
#tab_res td:nth-of-type(4):before { content: "Kod pocztowy"; line-height: 8px;}
 
}
 
 
@media only screen and (max-width: 692px),(min-device-width: 768px) and (max-device-width: 1024px)  
{
 
#tab_res_2  td:nth-of-type(1):before { content: ""; }
#tab_res_2  td:nth-of-type(2):before { content: "Login2"; line-height: 8px;}
#tab_res_2  td:nth-of-type(3):before { content: "Imię2"; line-height: 8px;}
#tab_res_2  td:nth-of-type(4):before { content: "Nazwisko2"; line-height: 8px;}
#tab_res_2  td:nth-of-type(5):before { content: "Stanowisko2"; line-height: 8px;}
 
}
[HTML] pobierz, plaintext 

[HTML] pobierz, plaintext 
<div id='tab_res'> <div id='tab_res_2'> 
<table>
	<thead>
	<tr>
		<th>Login</th>
		<th>Imię</th>
		<th>Miejcowość</th>
		<th>Kod pocztowy</th>
	</tr>
	</thead>
 
<tbody>
	<td>xxx</td>
	 <td>xxx</td>
	<td>xxx</b></td>
	<td>xxx</td>
</tbody>
 
</table>
 
</div></div>
[HTML] pobierz, plaintext