User:Larivact/trash/Template:RespCell

Comment: An idea to make tables more readable on narrow screens (the CSS toggles if your browser width is below 600px).

Demo:

Name	Written in	File review	Diff view	Git clone	Reliable parser	Reliable solver	Split packages	Clean build	Unsafe flags	Batch interaction	Shell completion	Specificity
pakku^AUR	Nim	data-label="File review" Template:Ya	data-label="Diff view" Template:Ya	data-label="Git clone" Template:Ya	data-label="Reliable parser" Template:Ya	data-label="Reliable solver" Template:Ya	data-label="Split packages" Template:Ya	data-label="Clean build" Template:Ya	-Sy	1	bash, zsh	ABS support, AUR comments, fetch PGP keys
pikaur^AUR	Python	data-label="File review" Template:Ya	data-label="Diff view" Template:Ya	data-label="Git clone" Template:Ya	data-label="Reliable parser" Template:Ya	data-label="Reliable solver" Template:Ya	data-label="Split packages" Template:Ya	data-label="Clean build" Template:Ya	-Sy	1,2,3	bash, zsh, fish	ABS support, dynamic users, multilingual, print news

Usage:

{{RespCell|Column name|Cell value}}

If the cell value alters the cell CSS you need to use:

{{RespCell|Column name|3=Cell value}}

Required CSS (you can put it in User:Name/common.css to try this out):

@media only screen and (max-width: 600px)  {
	table.responsive-table, table.responsive-table thead, table.responsive-table tbody, table.responsive-table th, table.responsive-table td, table.responsive-table tr { 
		display: block; 
	}

	table.responsive-table thead tr { 
		display: none;
	}

	table.responsive-table tbody tr {
		border-bottom: 2px solid #ccc;
	}

	table.responsive-table td {
		position: relative;
		padding-left: 50% !important; 
		border-bottom: 0 !important;
	}

	table.responsive-table td:before { 
		position: absolute;
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		content: attr(data-label);
		text-align: left;
	}
}