DataTable：删除所有水平边框答案

【问题标题】：DataTable: Remove all horizontal bordersDataTable：删除所有水平边框
【发布时间】：2019-02-14 08:48:14
【问题描述】：

如何将所有水平边框移除为仅偶数/奇数阴影？

https://datatables.net/examples/styling/stripe.html

这不起作用。

table.dataTable.row-border tbody th, 
table.dataTable.row-border tbody td, 
table.dataTable.display tbody th, 
table.dataTable.display tbody td {
  border: none;
}

我还想删除顶部和底部的黑色边框。这似乎没有任何效果。

table.dataTable thead th {
  border-bottom: 0;
  border-style: none;
}
table.dataTable tfoot th {
  border-top: 0;
  border-style: none;
}
table.dataTable .no-footer {
  border-bottom: 0;
}

【问题讨论】：

标签： r dt

【解决方案1】：

您可以像这样删除顶部边框和底部边框：

datatable(head(iris), 
          options=list(headerCallback = JS(
            "function( thead, data, start, end, display ) {
            $(thead).closest('thead').find('th').each(function(){
              $(this).css('color', 'red').css('border','none');
            });
            }"
            ),
            initComplete = JS(
            "function(settings) {
            var table = settings.oInstance.api(); 
            $(table.table().node()).removeClass('no-footer');
            }")))

【讨论】：

还刚刚发现有一个选项style="bootstrap" 删除所有水平线和表格样式（圆形搜索栏等）以适应其余引导页面元素。
由于某种原因，这不会为我删除底部边框，但是我设法通过使用 !important: '.dataTables-wrapper.no-footer .dataTables-scrollBody{ 边框覆盖预设的底部边框-bottom: none !important;}'

【解决方案2】：

您可以使用以下代码将所有水平边框移除为仅偶数/奇数阴影：

datatable(mtcars[1:3,1:3], class = 'stripe')

【讨论】：