数据表分页 CSS 格式化

Question

的数据表

Codepen - https://codepen.io/raj2619/pen/eYyEjEE

我使用了以下 CSS 来突出显示在分页栏中单击的项目

        #example_paginate {
        color:rgba(255, 110, 0, 0.8);
        font-size:19px;
        font-family:"Trebuchet MS";
        }   
        .page-item.active .page-link {
        color: #fff !important;
        background: green;              
        background-color: #000 !important;
        }
        .page-link {
        color: #000 !important;
        background-color: #fff !important;
        border: 1px solid #dee2e6 !important; 
        }
        .page-link:hover {
        color: #fff !important;
        background-color: #000 !important;
        border-color: #000 !important; 
        }

但是，这不会突出显示所单击页码的整个背景。它只是突出显示数字。我需要进行哪些调整才能突出显示所点击页码的整个背景？

目前看起来如下 -

我想让它看起来像下面这样。

我绝不是 CSS 专家。请在这里提供帮助，我将不胜感激。

Answer 1

要获得圆形按钮，您可以将此规则添加到您的 CSS（您可以调整填充以准确获得所需的结果）：

.dataTables_wrapper .dataTables_paginate .paginate_button {
   border-radius: 50% !important;
   padding: 0.5em 0.9em !important;
}

数据表分页 CSS 格式化

Datatables pagination CSS formatting

css

datatable

pagination