HTML标记

对于标记，我正努力使其尽可能干净简约。 我决定使用外部主DIV元素，然后是一系列UL列表来呈现比较表中的每个“行”内容：

比较表必须由多个彼此堆叠的UL组成。 我将使用CSS弹性框使它们的宽度相等，并以相同的速率展开和收缩，因此它们的行为与表中的行类似。

<div class =“comparativetable”>
	<ul class =“row”>
		<li class =“legend”>办公椅</ li>
		<li> <img src =“Eurotech-chair.jpg”/> <br /> Eurotech </ li>
		<li> <img src =“Hbada-chair.jpg”/> <br /> Hbada </ li>
		<li> <img src =“Zenith-chair.jpg”/> <br /> Zenith </ li>
		<li> <img src =“amazonbasics-chair.jpg”/> <br /> Amazonbasics </ li>
	</ UL>
	
	<ul class =“row”>
		<li class =“legend”>重量</ li>
		<LI>25公斤</ LI>
		<LI>13公斤</ LI>
		<LI>17公斤</ LI>
		<LI>28公斤</ LI>
	</ UL>
	
	<ul class =“row”>
		<li class =“legend”>费用</ li>
		<LI> $$ </ LI>
		<LI> $ </ LI>
		<LI> $$ </ LI>
		<LI> $ </ LI>
	</ UL>
	
	<ul class =“row”>
		<li class =“legend”>投放</ li>
		<LI>国内</ LI>
		<LI>国际</ LI>
		<LI>国际</ LI>
		<LI>国内</ LI>
	</ UL>
	
	<ul class =“row”>
		<li class =“legend”>判决</ li>
		<li>最佳背痛主席</ li>
		<li>最佳预算椅</ li>
		<li>所有冷却网格</ li>
		<li>只有Top Grain Leather的椅子</ li>
	</ UL>
	
	<ul class =“row”>
		<li class =“legend”> </ li>
		<li> <a href="" class="calltoaction">立即购买</a> </ li>
		<li> <a href="" class="calltoaction">立即购买</a> </ li>
		<li> <a href="" class="calltoaction">立即购买</a> </ li>
		<li> <a href="" class="calltoaction">立即购买</a> </ li>
	</ UL></ DIV>

每个UL中的第一个LI元素是特征/图例。 为了便于隔离和设置它们与其他包装的不同，我给那些LI元素一个CSS类“传奇”。

CSS：

现在有趣的部分 - 将标记转换为比较表。 使用CSS Flexbox，转换UL元素相对容易，因此它们在布局，弯曲和拉伸方面是水平的，因此它们更像表格单元格。

我删除了一些不必要的行，这样你就可以专注于下面的重要部分：

div.comparisontable {
	显示：flex;
	弯曲方向：柱; / *将儿童ul元素转换为堆叠行* /}div.comparisontable ul.row {
	list-style：none;
	显示：flex; / *将儿童li元素转换为flex儿童* /
	flex：1;
	flex-wrap：wrap;}div.comparisontable ul.row li {
	背景：＃c9f4ca;
	flex：1;
	填充：10px;
	border-bottom：1px纯灰色;}/ *图例列（每行中的第一个li）* /div.comparisontable ul.row li.legend {
	背景：＃6640d8;
	白颜色;
	border：none;
	宽度：200px;
	边框底部：1px纯白色;}/ *第一行* /div.comparisontable ul.row：first-of-type li {
	text-align：center;}/ *最后一行* /div.comparisontable ul.row：last-of-type li {
	text-align：center;
	border-bottom：none;
	box-shadow：0 6px 6px rgba（0,0,0,0.23）;}/ *图例列中的第一个和最后一个单元格* /div.comparisontable ul.row：first-of-type li.legend.legend，div.comparisontable ul.row：last-of-type li.legend {
	背景：透明;
	box-shadow：none;}

“要素列表”或图例列是每行的第一个LI元素。 它的显式宽度为200px，与其他柔性宽度的LI元素（flex：1）不同。

使比较表响应

现在比较表没有响应。 也就是说，即使屏幕尺寸变得非常小，每行内的“列”也是并排的。

在CSS弹性框中，我们可以通过将flex-direction属性从“row”设置为“”，轻松地将flex子元素的显示顺序从默认的“并排”行为更改为“堆叠在下一个上面”。柱”。

现在在我的比较表中，UL元素本身是堆叠的，尽管子LI元素像表格中的单元格一样并排出现。 当屏幕变得足够小时，我会将它们更改为堆叠：

@media screen和（max-width：650px）{div.comparisontable ul.row {
	弯曲方向：柱; }div.comparisontable img {
	宽度：自动;
	身高：自动;}div.comparisontable ul.row li {
	margin-right：0;
	宽度：自动;
	flex：auto;}/ *图例列中的第一个和最后一个单元格* /div.comparisontable ul.row：first-of-type li.legend.legend，div.comparisontable ul.row：last-of-type li.legend {
	display：none;}div.comparisontable ul.row li.legend {
	宽度：自动;}}

现在，当我调整窗口大小时，比较表会折叠，每个“单元格”都会出现在自己的行上：

已知问题

最后但并非最不重要的是，比较表存在一个小问题。 当你调整它的大小时，在某些时间间隔，一些LI的宽度会变得不同步：