stack a table using css responsive

this can be useful for fitting tables into smaller screens, usually add this to a media query.

#tableid td {
	display: table-row;
	width:100%;
	display:block;
}

and with a screen size added

@media (max-width: 900px){ 
#tableid td {
	display: table-row;
	width:100%;
	display:block;
	text-align:center;
}
}

this will take all the elements of a table, like td cells and span them to 100% width. You might also want to center the text.

this demo table should stack if the window size is less than 900px wide

some example data
some example data some example data some example data

Demo

Other Items in css

Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹