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).


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


{{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;