Scrollbare Tabelle mit fester erster Spalte (css-only, html5)

html / css: fixed column in horizontal scrolling - css-only solution

Beispiel - so sieht's aus

Wrapper-Start,

Wrapper = beliebiger DIV-Container

 

  Artikel 1 Artikel 2 Artikel 3
Beschreibung 1 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Beschreibung 2 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Beschreibung 3 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Beschreibung 4 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor
Beschreibung 5 Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor

Wrapper-Ende

Quelltext

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scrollbare Tabelle mit fester erster Spalte</title>
  <style>
	  div.wrapper {width:30em;margin:auto;border:solid 1px #FF0000}
	  div.TabelleV5-1 {padding-left:10em;}
	  div.TabelleV5-2 {position:relative;width:100%; padding:0px;}
	  div.TabelleV5-3 {overflow-x:scroll;padding:0px;}
	  table.TabelleV5-4 {border-collapse:collapse;padding:0px;}
	  .TabelleV5-4 tr:nth-of-type(even) {background-color:#eee; /* Zebrastreifen */}
	  .TabelleV5-4 td, .TabelleV5-4 th {min-width:9em;border-top:1px solid #ccc;padding:0em .3em}
	  .TabelleV5-4 td.V5columnH, .TabelleV5-4 th.V5columnH {position:absolute;left:-10em;}
	  .TabelleV5-4 td.V5columnH, .TabelleV5-4 th {font-weight:bold;}
	</style>
</head>
<body>

<div class="wrapper"> 
	<p>Wrapper-Start</p>
	<p>&nbsp; </p>

	<div class="TabelleV5-1">
		<div class="TabelleV5-2">
			<div class="TabelleV5-3">
				<table class="TabelleV5-4">
					<thead>
						<tr>
							<th class="V5columnH">&nbsp; </th>
							<th>Artikel 1 </th>
							<th>Artikel 2 </th>
							<th>Artikel 3 </th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td class="V5columnH">Beschreibung 1 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 2 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 3 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 4 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>		
							<td>Lorem...</td>
						</tr>
						<tr>
							<td class="V5columnH">Beschreibung 5 </td>
							<td>Lorem...</td>
							<td>Lorem...</td>
							<td>Lorem...</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<p>Wrapper-Ende</p>
</div>

</body>
</html>