html - 带有 css 和滚动条的反转表

Question

.box{
	position: relative;
	display: box;
	padding: 10px;
	width: 100%;
	background-color: grey;
}

table.market{
	position: relative;
	display: box;
	width: 100%;
}

.market tbody tr {
	color: #555;
	border-bottom: 1px solid #1f2943;
	cursor: pointer;
	width: 100%;
}

.market tbody tr:hover {
	color: #555;
	background-color: #192b2f;
}

.market tbody{
	height: 200px;
	width: 100%;
	overflow: auto;
	display: flex;
	flex-direction: column-reverse;
	flex-shrink: 0;
}

<div class="box">
<table class="market" border="1">
	<tbody>
		<tr>
			<td>6,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
		
		<tr>
			<td>5,53,500</td>
			<td>0.28368756</td>
			<td>74125.05</td>
		</tr>
	</tbody>
</table>
</div>

工作正常，但我需要具有 100% 自动调整大小和反向滚动的列。反向滚动很好，但问题是宽度 td 不相等，宽度 100% 不起作用。

我正在处理 Custom Exchange，这是销售订单表部分，需要从高价到低价的反向表。

低价将从底部开始。

请解决我的问题谢谢。

Answer 1

如果 tds 需要在整个表格中平均分配，您可以使每一行(即 tr)成为一个 flex 元素，并使用以下方法设置 tds 以填充可用空间:

td {
   flex-grow: 1;
   flex-basis: 0;
   padding:2px;
}

至于对表格中的数据进行排序，您的代码将颠倒其输出顺序，但在为表格生成 HTML 时对服务器端进行排序可能比依赖 CSS 解决方案更有意义。

修改后的片段

.market tbody tr {    
    color: #555;    
    border-bottom: 1px solid #1f2943;    
    cursor: pointer;    
    width: 100%;
    display:flex;
}

td {
    flex-grow: 1;
    flex-basis: 0;
    padding:2px;
}