html - 重新排列移动表格中单元格的顺序

Question

我正在尝试更改我在@mobile 屏幕上的表格中的单元格顺序，但没有成功。

我在 Mac 上的表格宽度是一个网格，具有不同的单元格大小、颜色、字体大小等，但在移动设备上我希望它是一个由水平线分隔的简单列表，每个元素都有一个链接。我设法做到了这一点，但我还想更改列表的显示顺序。

尝试添加 div 并按此方式排序，但没有成功。欢迎任何建议!

这是我的 HTML 和移动 CSS:

@mobile screen CSS

.situations {


		table.situ {
		margin-left: 0%;
		}


		tr { 
		display: block;
		color: #161616 !important;
		line-height: 1 !important;
		border: none;

	}

		#frame {
		height: 100px;
		width: 100%;
		}
	
	td { 
		/* Behave  like a "row" */
		display: block;
		background-color: #ffffff;
		border: none;
		border-bottom: 0.5px solid #161616; 
		position: relative;
		padding-left: 2%;
		text-align: center;
		height: 60px;
		width: $fullWidth;
		font-size: 14px !important;
		color: #161616 !important;
			padding-top: 8%;
		padding-bottom: 8%;
		line-height: 1 !important;

	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
		color: #161616 !important;
		line-height: 1 !important;
		border: none;
	}
  }

<section class="situations responsiveWidth center cinch2">
<div class="table"><table class="situ" id="frame" border="0" cellspacing="0" cellpadding="0">

  <tr>
  <div id="situ4"><td class="product1" height="33.333%" rowspan="2"><a class="label black" href="product1.html">Text</a></td></div>
    <div id="situ6"><td class="product2" height="16.666%"><a class="label black" href="product2.html">Text</a></td></div>
    
    <div id="situ3"><td class="product3" height="50%" rowspan="3"><a class="label black" href="product3.html">Text</a></td></div>
  </tr>
  <tr>
  	<div id="situ5"><td class="product4" height="16.666%"><a class="label black" href="product4.html">Text</a></td></div>
  </tr>
  <tr>
  	<div id="situ2"><td class="product5" height="33.333%" colspan="2" rowspan="2"><a class="label black big" href="product5.html">Text</a></td></div>
  </tr>
  <tr>
  <div id="situ7"><td class="product6" height="16.666%"><a class="label black" href="product6.html">Text</a></td></div>
  </tr>
  <tr>
  <div id="situ8"><td class="product7" height="16.666%"><a class="label black startout" href="product7.html" id="situ8">Text</a></td></div>
  <div id="situ1"><td class="product8" height="33.333%" colspan="2" rowspan="2"><a class="label white big" href="product8.html">Text</a></td></div>
  </tr>
  <tr>
  <div id="situ9"><td class="product9" height="16.66666%"><a class="label black" href="product9.html" id="situ9">Text</a></td></div>
  </tr>
  </table></div>
  <br>
  </section>

Answer 1

您可以考虑使用 div 而不是表格，并为行设置一个 flexbox。更改列的顺序非常容易。

.table {
  display: table;
  width: 100%;
}

.row {
  display: flex;
  justify-content: space-between;
  width: 100%;
  border-bottom: thin solid lightgray;
}

.cell {
  display: table-cell;
  padding: 0.5em;
}

.title {
  order: 2;
}

.name {
  order: 1;
}

.zip {
  order: 4;
}

.place {
  order: 3;
}

<div class="table">
  <div class="row">
    <div class="cell title">Title</div>
    <div class="cell name">Name</div>
    <div class="cell zip">Zip</div>
    <div class="cell place">Place</div>
  </div>
  <div class="row">
    <div class="cell title">Title</div>
    <div class="cell name">Name</div>
    <div class="cell zip">Zip</div>
    <div class="cell place">Place</div>
  </div>
  <div class="row">
    <div class="cell title">Title</div>
    <div class="cell name">Name</div>
    <div class="cell zip">Zip</div>
    <div class="cell place">Place</div>
  </div>
</div>