User:Larivact/trash/Template:RespCell

From ArchWiki
Jump to navigation Jump to search
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
pakkuAUR Nim -Sy 1 bash, zsh ABS support, AUR comments, fetch PGP keys
pikaurAUR Python -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;
	}
}