обратная таблица css и scroll

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) гибким элементом и установить 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;
}