代码之家  ›  专栏  ›  技术社区  ›  mindlessgreen

DataTable:删除所有水平边框

dt r
  •  1
  • mindlessgreen  · 技术社区  · 6 年前

    如何删除所有水平边框,使其仅为偶数/奇数着色?

    enter image description here

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

    enter image description here

    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;
    }
    
    2 回复  |  直到 6 年前
        1
  •  2
  •   Grant Miller    6 年前

    可以使用以下代码删除所有水平边框,仅删除偶数/奇数着色:

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

    enter image description here

        2
  •  3
  •   Stéphane Laurent    6 年前

    可以删除上边框和下边框,如下所示:

    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');
                }")))