Как выравнить таблицу по середине и задать ширину 95%
Мне нужно выравнить таблицу по центру, добавить скролл по горизонтали, я нашел пример, с затенением по краям таблицы, адаптировал к своей таблице. Мой CSS и HTML:
.big-table
{
overflow: auto;
position: relative;
margin-left: auto;
margin-right: auto;
}
.big-table table {
display: inline-block;
width: 100%;
overflow-x: auto;
/*white-space: nowrap;*/
-webkit-overflow-scrolling: touch;
font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-weight: bold;
}
.scroll-right:after {
content: '';
display: block;
width: 15px;
position: absolute;
top: 0;
right: 0;
bottom: 0;
z-index: 500;
background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 75%) 100% center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 15px 100%;
background-position: 100% 0%;
}
.scroll-left:before {
content: '';
display: block;
width: 15px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
z-index: 500;
background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 20%, rgba(0, 0, 0, 0) 75%) 0 center;
background-repeat: no-repeat;
background-attachment: scroll;
background-size: 15px 100%;
}
thead th {
text-align: left;
border: none;
padding: 10px 15px;
background: #adadad;
font-size: 1em;
}
tbody td {
text-align: left;
border: none;
padding: 10px 15px;
font-size: 1em;
vertical-align: top;
}
tbody tr:nth-child(even){
background: #f3f3f3;
}
<div class="big-table">
<table>
<thead>
<tr>
<th>Номер заказа</th>
<th>Дата заказа</th>
<th>Артикул продавца</th>
<th>Цена</th>
<th>Размер</th>
<th>Область</th>
<th>Предмет</th>
<th>Категория</th>
<th>Бренд</th>
<th>Выкуп/Отмена</th>
</tr>
</thead>
<tbody>
<tr>
<td>номер</td>
<td>дата</td>
<td>артикул</td>
<td>прайс</td>
<td>размер</td>
<td>область</td>
<td>предмет</td>
<td>категория</td>
<td>бренд</td>
<td>Отменен до оплаты</td>
</tr>
</tbody>
</table>
</div>
<script src="https://snipp.ru/cdn/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function(){
$('table').wrap('<div class="big-table"></div>');
function resize_table_box() {
$('.big-table').each(function(){
var box_width = $(this).outerWidth();
var table_width = $(this).children('table').prop('scrollWidth');
$(this).removeClass('scroll-left');
if (table_width > box_width) {
$(this).addClass('scroll-right');
} else {
$(this).removeClass('scroll-right');
}
});
}
resize_table_box();
$( window ).on('resize', function() {
resize_table_box();
});
$('.big-table table').on('scroll', function() {
var parent = $(this).parent();
if ($(this).scrollLeft() + $(this).innerWidth() >= $(this)[0].scrollWidth) {
if (parent.hasClass('scroll-right') ){
parent.removeClass('scroll-right');
}
} else if ($(this).scrollLeft() === 0){
if (parent.hasClass('scroll-left')){
parent.removeClass('scroll-left');
}
} else {
if(!parent.hasClass('scroll-right')){
parent.addClass('scroll-right');
}
if(!parent.hasClass('scroll-left')){
parent.addClass('scroll-left');
}
}
});
});
</script>
Подскажите, как сделать таблицу по центру и задать ширину 95%?
Источник: Stack Overflow на русском