R 中带有 DT 数据表的圆形边框

Question

我想要我的 DT 表格有圆形边框。不幸的是，我的 JS 技能非常有限（甚至不存在），因此如果有人能帮助我弄清楚如何在 R 中的 DT 表上实现圆形边框，我会非常高兴。

这是我到目前为止的代码：

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      paste0(
        "$(this.api().table().header()).css({
          'background-color': 'black',
          'color': 'white',
          'border-top-left-radius': '4px',
          'border-top-right-radius': '4px'
          });"
      ),
      "}"
    )
  )
)

最后一部分

border-top-left-radius

不起作用，但类似这样的东西将是解决方案。我认为这个answer有纯JS的解决方案，但我需要有人帮助我在我的R代码中实现这个片段。

这是我的代码的屏幕截图。现在我想要一个带有半径的左上边框和右上边框。正如你所看到的，目前边框是 90 度。

Answer 1

你必须使用

overflow: hidden

。

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      paste0(
        "$(this.api().table().header()).css({
          'background-color': 'black',
          'color': 'white',
          'border-top-left-radius': '4px',
          'border-top-right-radius': '4px', 
          'overflow': 'hidden'
          });"
      ),
      "}"
    )
  )
)

Answer 2

下面的代码就可以了！从数据表论坛的以下链接中获得了解决方案。

DT::datatable(
  data = iris,
  options = list(
    initComplete = DT::JS(
      "function(settings, json) {",
      "$('th').css({'background-color': 'black'});",
      "$('th').css({'color': 'white'});",
      "$('th:first-child').css({'border-top-left-radius': '15px'});",
      "$('th:last-child').css({'border-top-right-radius': '15px'});",
      "}"
    )
  )
)