Henning: Klassische Tabelle umwandeln in responsive Darstellung

Beitrag lesen

SELF-Forum

Klassische Tabelle umwandeln in responsive Darstellung

Henning
– Informationen zu den Bewertungsregeln

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?

Antwort verfassen Antwort mit Zitat verfassen Beitrag melden
–
Informationen zu den Bewertungsregeln