数据表分页按钮 - 删除不需要的空间

Posted 2023-03-10

【中文标题】数据表分页按钮 - 删除不需要的空间

【英文标题】：Datatables pagination buttons - Remove unwanted space

【发布时间】：2015-05-11 09:30:21

【问题描述】：

目前我的分页如下所示：

我正在尝试解决如何删除按钮之间的空间，但没有成功。在 css 文件中，我能找到的唯一分页参考是：

jquery.dataTables.css (319 - 394)：

.dataTables_wrapper .dataTables_paginate 
  float: right;
  text-align: right;
  padding-top: 0.25em;

.dataTables_wrapper .dataTables_paginate .paginate_button 
  box-sizing: border-box;
  display: inline-block;
  min-width: 1.5em;
  padding: 0.5em 1em;
  margin-left: 2px;
  text-align: center;
  text-decoration: none !important;
  cursor: pointer;
  *cursor: hand;
  color: #333333 !important;
  border: 1px solid transparent;

.dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover 
  color: #333333 !important;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, white), color-stop(100%, gainsboro));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, white 0%, gainsboro 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, white 0%, gainsboro 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, white 0%, gainsboro 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, white 0%, gainsboro 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, white 0%, gainsboro 100%);
  /* W3C */

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active 
  cursor: default;
  color: #666 !important;
  border: 1px solid transparent;
  background: transparent;
  box-shadow: none;

/*.dataTables_wrapper .dataTables_paginate .paginate_button:hover 
  color: white !important;
  border: 1px solid white;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #585858), color-stop(100%, #111111));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #585858 0%, #111111 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #585858 0%, #111111 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #585858 0%, #111111 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #585858 0%, #111111 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #585858 0%, #111111 100%);
  /* W3C */
 */
.dataTables_wrapper .dataTables_paginate .paginate_button:active 
  outline: none;
  background-color: #2b2b2b;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #2b2b2b), color-stop(100%, #0c0c0c));
  /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* Chrome10+,Safari5.1+ */
  background: -moz-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* FF3.6+ */
  background: -ms-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* IE10+ */
  background: -o-linear-gradient(top, #2b2b2b 0%, #0c0c0c 100%);
  /* Opera 11.10+ */
  background: linear-gradient(to bottom, #2b2b2b 0%, #0c0c0c 100%);
  /* W3C */
  box-shadow: inset 0 0 3px #111;

dataTables.bootstrap.css (32 - 50):

div.dataTables_paginate 
    margin: 0;
    white-space: nowrap;
    text-align: right;


div.dataTables_paginate ul.pagination 
    margin: 2px 0;
    white-space: nowrap;


@media screen and (max-width: 767px) 
    div.dataTables_length,
    div.dataTables_filter,
    div.dataTables_info,
    div.dataTables_paginate 
        text-align: center;
    

但是，我似乎找不到任何大边距或填充的参考。虽然 CSS 并不是我的强项。

有谁知道是否还有其他对可能相关的分页按钮的引用？还是必须彻底解决问题？

【参考方案1】：

这个问题已经在他们的错误数据库中注意到了。 你不需要破解 css。

bootstrap pagination looks bad #39

无需包含 DataTables 自己的样式表 (jquery.dataTables.css)，因为 Bootstrap 和集成文件提供了所需的一切。

所以只需删除jquery.dataTables.css，并在您的html 样式表中保留dataTables.bootstrap.min.css。

【讨论】：

我喜欢在没有 cmets 的情况下投反对票来说明原因。谢谢

谢谢你，它还解决了每列的顺序箭头上方出现框的问题 - 非常奇怪（我也在使用日语文件，不确定它是否有所不同）希望这也可以帮助其他人。

你拯救了我的一天，在我努力在我的 css 中手动完成之后，这个解决方案非常有效

感谢您的智慧。您应该被编写文档的团队雇用...

@karns 他们的软件应该可以防止你犯这个错误。

【参考方案2】：

哦，是的。容易重现错误。为了解决这个问题，在其他 CSS 引用之后添加这个 CSS：

.dataTables_wrapper .dataTables_paginate .paginate_button 
    padding : 0px;
    margin-left: 0px;
    display: inline;
    border: 0px;

.dataTables_wrapper .dataTables_paginate .paginate_button:hover 
    border: 0px;

演示 -> http://jsfiddle.net/s6c35ogt/ 尝试在右上角注释掉添加的 CSS，您将看到与您描述的完全相同的行为。

【讨论】：

@Darkstarone，不客气！感谢您接受答案。

可以吻你：p

【参考方案3】：

.paginate_button padding: 0!important; margin-left: 0!important; 没有一个空格