Menü +

Blog durchsuchen

Tabellen responsiv machen

Ein paar CSS-tipps, um Tabellen für schmale Bildschirme nutzbar zu machen:

Tabelle mit einem Div umschließen, das folgende Klasse hat:


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


Scrollbalken für os und ios:

.table-container::-webkit-scrollbar
{
	-webkit-appearance: none;
	width: 14px;
	height: 14px;
}

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

http://maxdesign.com.au/articles/simple-responsive-table/

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.