Как выравнить таблицу по середине и задать ширину 95%

Рейтинг: -1Ответов: 1Опубликовано: 22.02.2023

Мне нужно выравнить таблицу по центру, добавить скролл по горизонтали, я нашел пример, с затенением по краям таблицы, адаптировал к своей таблице. Мой 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%?

Ответы

▲ 0

Для выравнивания таблицы можете воспользоваться свойством margin:auto. Для обозначения ширины используйте свойство width:'необходимые значения' Выравнивание текста:text-aligin