带有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;
}