Antwort an „Henning“ verfassen

SELF-Forum

Klassische Tabelle umwandeln in responsive Darstellung

Henning

Hallo Rolf,
ich habe das Beispiel in Wiki wie folgt geändert

<!DOCTYPE html>
<html>
<head>
<style>
table {
 	border-collapse: collapse;
 }
 
 td,
 th {
 	padding: 1em;
 }
 
 th:first-child {
 	padding-left: .5em;
 }
 
 th:last-child,
 td:last-child {
 	padding-right: .5em;
 }
 
 thead th {
 	border: 1px solid blue;
 }
 tbody td {
 	border: 1px dashed red;
 }
 
 tbody th {
 	font-weight: normal;
 	text-align: left;
 }</style>
</head>
<body>
<table>
	<thead>
		<tr>
			<th><a href="">Text1</a></th>
			<th><a href="">Zahl1</a></th>
			<th><a href="">Text2</a></th>
			<th><a href="">Zahl2</a></th>
			<th><a href="">Zahl3</a></th>
			<th><a href="">Text4</a></th>
			<th><a href="">Text5</a></th>
			<th><a href="">Text6</a></th>
		</tr>
	</thead>
	<tbody>
		<tr>
		    <td>xx<td/>
		    <td>999999<td/>
		    <td>aaaaaaaaaaaa<td/>
		    <td>12<td/>
		    <td>123456<td/>
		    <td>bbbbbbbb<td/>
		    <td>3434<td/>
		    <td>xp<td/>
		</tr>
    </tbody>

</body>
</html>

Ergebnis ist

Woher kommen dies Leere Zellen?

freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar
freiwillig, öffentlich sichtbar

Ihre Identität in einem Cookie zu speichern erlaubt es Ihnen, Ihre Beiträge zu editieren. Außerdem müssen Sie dann bei neuen Beiträgen nicht mehr die Felder Name, E-Mail und Homepage ausfüllen.

abbrechen