Vertically stack table td elements with css

by katalin_2003

HTML

<table>
	<tr>
		<th>Title 1</th>
		<th>Title 2</th>
		<th>Title 3</th>
		<th class="separator no-border"></th>
		<th class="no-border-left">Title 5</th>
		<th>Title 6</th>
	</tr>
	<tr>
		<td class="horizontal">Details 1.1</td>
		<td class="horizontal">Details 1.2</td>
		<td class="vertical no-border border-right" style="">Product 1.1</td>
		<td class="vertical no-border border-right">Product 1.2</td>
		<td class="vertical no-border border-right">Product 1.3</td>
		<!-- to serve as separator between the two stacks -->
		<td class="horizontal separator no-border"></td>

		<td class="vertical no-border" style="">Price 1.1</td>
		<td class="vertical no-border">Price 1.2</td>
		<td class="vertical no-border">Price 1.3</td>
		<td class="horizontal">Details 1.3</td>
	</tr>
	<tr>
		<td class="horizontal">Details 2.1</td>
		<td class="horizontal">Details 2.2</td>
		<td class="vertical no-border border-right">Product 2.1</td>
		<td class="vertical no-border border-right">Product 2.2</td>
		<td class="vertical no-border border-right">Product 2.3</td>
		<!-- to serve as separator between the two stacks -->
		<td class="horizontal separator no-border"></td>

		<td class="vertical no-border">Price 2.1</td>
		<td class="vertical no-border">Price 2.2</td>
		<td class="vertical no-border">Price 2.3</td>
		<td class="horizontal">Details 2.3</td>
	</tr>
	<tr>
		<td class="horizontal">Details 3.1</td>
		<td class="horizontal">Details 3.2</td>
		<td class="vertical no-border border-right">Product 3.1</td>
		<td class="vertical no-border border-right">Product 3.2</td>
		<td class="vertical no-border border-right">Product 3.3</td>
		<!-- to serve as separator between the two stacks -->
		<td class="horizontal separator no-border"></td>

		<td class="vertical no-border">Price 3.1</td>
		<td class="vertical no-border">Price 3.2</td>
		<td class="vertical no-border">Price 3.3</td>
		<td class="horizontal">Details 3.3</td>
	</tr>
</table>

CSS

table,
th,
td {
	border: 1px solid #000;
	border-collapse: collapse;
	font-family: sans-serif;
}

table {
	width: 100%;
}

th,
td {
	padding: 0.4em;
}

/**
 * Target only the 3rd and 7th <td> from the second group of <tr>
 * Remove top border for the top two td in the stack
 */
tr:nth-of-type(2) td:nth-of-type(3),
tr:nth-of-type(2) td:nth-of-type(7) {
	border-top: 0px;
}

.separator {
	padding: 0em;
	width: 0px;
}

.no-border {
	/* border-right: 0px; */
	border-bottom: 0px;
	border-right: 0px;
	border-left: 0px;
}

.no-border-left {
	border-left: 0px;
}

.border-right {
	border-right: 1px solid;
}

/* This is where the magig happens */
.vertical{
	display: flex;
}