Добавить горизонтальный свиток и выравнивать столбцы в таблице начальной загрузкиCSS

Разбираемся в CSS
Ответить
Anonymous
 Добавить горизонтальный свиток и выравнивать столбцы в таблице начальной загрузки

Сообщение Anonymous »

Я пытаюсь добавить горизонтальную полосу прокрутки в таблицу на основе начальной загрузки. Таблица выглядит следующим образом:
Изображение


.align-items-center {
align-items: center !important;
}

.total-count-row {
background-color: #ebebeb;
line-height: 1.5rem;
}

.table-data-column {
padding: 8px !important;
align-content: center;
}

.table-header-column, .table-data-column {
border-bottom: 2px solid #ebebeb;
}

.align-items-end {
align-items: flex-end !important;
}

.body-md-bold {
color: #1a1a1a;
font: 700 16px / 24px 'Open Sans' !important;
}

.exclusion-header-column {
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 12px;
border-bottom: 2px solid #6E267B;
}

.exclusion-candidate-column {
display: flex;
padding: var(0.75rem, 0.75rem) var(0.5rem, 0.5rem);
align-items: center;
gap: var(0.5rem, 0.5rem);
align-self: stretch;
border-right: 1px solid #EBEBEB;
border-bottom: 1px solid #EBEBEB;
}










Excluded candidate

Votes to
transfer



Remaining candidates

First pref
t o t a l & l t ; / s p a n & g t ; < b r / > < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; c o l c o l - w i d t h - 1 & q u o t ; & g t ; < b r / > & l t ; s p a n c l a s s = & q u o t ; d - f l e x j u s t i f y - c o n t e n t - e n d b o d y - m d - b o l d t e x t - r i g h t & q u o t ; & g t ; T r a n s f e r & l t ; b r / & g t ; v o t e s & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; c o l c o l - w i d t h - 1 & q u o t ; & g t ; < b r / > & l t ; s p a n c l a s s = & q u o t ; d - f l e x j u s t i f y - c o n t e n t - e n d b o d y - m d - b o l d t e x t - r i g h t & q u o t ; & g t ; T r a n s f e r % t o t a l & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; c o l c o l - w i d t h - 1 & q u o t ; & g t ; < b r / > & l t ; s p a n c l a s s = & q u o t ; d - f l e x j u s t i f y - c o n t e n t - e n d b o d y - m d - b o l d t e x t - r i g h t & q u o t ; & g t ; E x c l 1 & l t ; b r / & g t ; t o t a l & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; c o l c o l - w i d t h - 1 & q u o t ; & g t ; < b r / > & l t ; s p a n c l a s s = & q u o t ; b o d y - m d - b o l d t e x t - r i g h t d - f l e x j u s t i f y - c o n t e n t - e n d & q u o t ; & g t ; O v e r a l l % t o t a l & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; / d i v & g t ; < b r / > < b r / > & l t ; d i v c l a s s = & q u o t ; c o n t a i n e r - f l u i d & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; r o w a l i g n - i t e m s - c e n t e r & q u o t ; & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; c o l - 3 e x c l u s i o n - c a n d i d a t e - c o l u m n & q u o t ; & g t ; < b r / > & l t ; d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; e x c l u s i o n - c a n d i d a t e - n a m e & q u o t ; & g t ; < b r / > & l t ; s p a n c l a s s = & q u o t ; t e x t - u p p e r c a s e & q u o t ; & g t ; S u r e s h Y a d a v & l t ; / s p a n & g t ; < b r / > & l t ; / d i v & g t ; < b r / > & l t ; d i v c l a s s = & q u o t ; t e x t - u p p e r c a s e e x c l u s i o n - c a n d i d a t e - p a r t y & q u o t ; & g t ; < b r / > < b r / > & l t ; / d i v & g t ; < b r / >



200





Amit Jain




200



55



45%



75



35%













TOTAL COUNT


36



75










< /code>
Пожалуйста, предложить. Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/795 ... trap-table
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»