Ausgabe auf Smartphones

Bedienerfreundliche Tabellen - Tipp 3

Breite Tabellen haben oft keinen Platz auf schmalen Ausgabegeräten.
Für dieses Problem gibt einen Trick: horizontales Scrollen in einem <div>, der speziell für diesen Einsatz erstellt wird.

HTML-Code (angedeutet)

Die Tabelle ist in einem Wrapper-<div> "eingepackt". Gescrollt wird im <div>.

<div class="scrollable_div">
	<table>
    ...
    </table>
</div>

CSS-Code zum Kopieren

.scrollable_div {
	width: 100%;
  	overflow-y: auto;
  	margin: 0 0 1em;
}

/* Verbesserung der Darstellung 
des Scrollbars in Safari */
.scrollable_div::-webkit-scrollbar {
  	-webkit-appearance: none;
  	width: 14px;
  	height: 14px;
}

.scrollable_div::-webkit-scrollbar-thumb {
	border-radius: 8px;
  	border: 3px solid #fff;
  	background-color: rgba(0, 0, 0, .3);
}

Vorschau (formatiert)

	2012	2013	2014	2015	2016	2017	2018	2019
EU	17.266.167	17.992.915	18.540.014	16.220.370	17.371.618	17.578.724	18.750.052	15.621.673
USA	16.155.250	16.663.150	17.348.075	17.947.000	18.569.100	19.390.600	20.494.050	21.433.225
China	8.471.357	9.518.582	10.430.712	10.982.829	11.218.281	11.951.562	13.407.398	14.731.806
Japan	5.957.249	4.908.863	4.596.157	4.123.258	4.938.644	4.872.135	4.971.929	5.079.916
Indien	1.828.984	1.863.207	2.042.560	2.090.706	2.256.397	2.611.012	2.716.746	2.868.930
Brasilien	2.459.525	2.464.688	2.417.158	1.772.589	1.798.622	2.054.969	1.868.184	1.839.077
Kanada	1.824.289	1.837.443	1.783.776	1.552.386	1.529.224	1.652.412	1.711.387	1.736.426
Südkorea	1.222.807	1.305.605	1.410.383	1.376.868	1.411.246	1.538.030	1.619.424	1.646.739

Die Idee für diese Technik habe ich bei der Agentur "Kulturbanause" gefunden.

Was heisst `overflow`?