How to Fit Vertically a Wide HTML Table in Mobile Displays with 5 Lines of Code

We often need to display a wide table with many columns on mobile and the content doesn’t legibly shrink into a vertical screen. This feature orders your table content vertically using CSS only and works with all browsers.

For this example, we’re going to use a table with smartphone data:

HTML code below:

<table>
		<thead>
			<tr>
				<th>Phone Name</th>
				<th>Year</th>
				<th>Screen Size</th>
				<th>Resolution</th>
				<th>OS</th>
				<th>Chipset</th>
				<th>Processor</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>&nbsp;Xiaomi POCO X6</td>
				<td>&nbsp;2024</td>
				<td><span style="font-style: normal; font-weight: 400;">6.67in</span>&nbsp;</td>
				<td>&nbsp;1220 x 2712</td>
				<td>&nbsp;Android 14, HyperOS</td>
				<td><span style="font-style: normal; font-weight: 400;">Mediatek Dimensity 8300 Ultra (4 nm)</span>&nbsp;</td>
				<td>&nbsp;Octa-core 3.35 GHz (1+3+4 cores)</td>
			</tr>
			<tr>
				<td>&nbsp;Galaxy S24</td>
				<td>&nbsp;2024</td>
				<td>6.8in&nbsp;</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">1440 x 3088</span>&nbsp;</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">Android 14, One UI 6.1</span>&nbsp;</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">Qualcomm SM8650-AC Snapdragon 8 Gen 3 (4 nm)</span>&nbsp;</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">Octa-core (1x3.3 GHz Cortex-X4 &amp; 5x3.2 GHz Cortex-A720 &amp; 2x2.3 GHz Cortex-A520)</span>&nbsp;</td>
			</tr>
			<tr>
				<td>&nbsp;Asus ROG Phone 8 Pro</td>
				<td>&nbsp;2024</td>
				<td>6.78in&nbsp;</td>
				<td>&nbsp;1080 x 2400</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">Android 14</span><br></td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start;">Qualcomm SM8650-AB Snapdragon 8 Gen 3 (4 nm)</span>&nbsp;</td>
				<td><span style="color: rgb(0, 0, 0); font-family: Arimo, Arial; font-size: 14px; font-style: normal; font-weight: 400; text-align: start; background-color: rgb(250, 250, 250);">Octa-core (1x3.3 GHz Cortex-X4 &amp; 5x3.2 GHz Cortex-A720 &amp; 2x2.3 GHz Cortex-A520)</span>&nbsp;</td>
			</tr>
		
		</tbody>
	</table>

We’re going to use CSS to:

1. Remove the header
2. Make each cell full-width
3. Add content before each cell with the respective feature name
4. Switch the background color for each row to make it easier for visitors to notice where each item starts and ends

@media screen and (min-width: 768px) {
//HIDES THE HEADER
.thead {display: none;} 
//SINCE EACH ROW IS AN ITEM, WE SWITCH 
//BACKGROUND COLOR PER ROW IN ORDER TO 
//DIFFERENTATE EACH ITEM EASILY
tr:nth-child(even) td {background-color: lightgrey;}
//FULL WIDTH FOR EACH FEATURE CELL
td {display: block;}
//ADD FEATURE NAME
tbody td:nth-child(1):before {
content: 'Model:';
}
tbody td:nth-child(2):before {
content: 'Year:';
}
tbody td:nth-child(3):before {
content: 'Screen Size:';
}
tbody td:nth-child(4):before {
content: 'Resolution:';
}
tbody td:nth-child(5):before {
content: 'OS:';
}
tbody td:nth-child(6):before {
content: 'Chipset:';
}
tbody td:nth-child(7):before {
content: 'Processor:';
}
//FORMAT FEATURE NAMES
//DISPLAY:BLOCK MAKES EACH FEATURE NAME STAND
//AS A SINGLE ROW
tbody td:before {
    display: block;
    font-weight: bold;
}
}

A similar code can be used for Description List elements (DL DT). Please notice previous CSS may interfere with the code above.