当数据表中第一个标题和第一个列固定时，如何防止标题移动？

问题描述 投票：0回答：1

我有一个数据表，在水平和垂直滚动时，第一个标题和第一列是固定的。

由于这个答案，一切正常。

但是，如果第一列包含比标题大的单元格，当我回到表格的左上角时，我会在滚动到底部和右侧后得到这个：

这是重现图片的代码：

library(shiny)
library(DT)
library(tidyverse)

(df <- diamonds[1:100,])
df <- mutate(df, carat = as.character(carat))
df[1, 1] <- "qwertyuiopqwertyuiop"
df <- bind_cols(df[1:100, ], df[1:100, ])

runApp(
  list(ui = fluidPage(
    selectInput("here", "Here to reproduce bug", letters),
    dataTableOutput("mytable")
    ),
       server = function(input, output, session){
         output$mytable <- renderDataTable(
           DT::datatable(df,
                         rownames=FALSE,
                         extensions = c("FixedColumns",
                                        "FixedHeader"), 
                         options =
                           list(dom = 't', 
                                scrollX = TRUE, 
                                paging=FALSE,
                                fixedHeader=TRUE,
                                fixedColumns =
                                  list(leftColumns = 1,
                                       rightColumns = 0))))}))

编辑：

正如 @r2evans 所建议的，我尝试仅使用 javascript 代码重现该错误。但大柱的包装是不同的，我无法重现该问题。看下面的图片和代码：会不会是css的问题？

index.html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>datatables bug</title>
  <link rel="stylesheet" href="style.css">

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>


  <script src="https://cdn.datatables.net/1.13.6/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/1.13.6/css/jquery.dataTables.css" />

  <script src="https://cdn.datatables.net/fixedheader/3.4.0/js/dataTables.fixedHeader.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedheader/3.4.0/css/fixedHeader.bootstrap.css" />

  <script src="https://cdn.datatables.net/fixedcolumns/4.3.0/js/dataTables.fixedColumns.min.js"></script>
  <link rel="stylesheet" href="https://cdn.datatables.net/fixedcolumns/4.3.0/css/fixedColumns.bootstrap.css" />
  

  <script src="www/script.js"></script>
</head>

<body>
  <h1>Scroll the table to the right and the bottom and go back</h1>
  <p>If the table is not wide or long enough to scroll just zoom in...</p>

  <hr>

</html>

www/script.js

function tableCreate() {
    const table_size = 20;
    const body = document.body,
        tbl = document.createElement('table'),
        hd = document.createElement('thead');


    const r = hd.insertRow();
    for (let i = 0; i < table_size; i++) {
        const h = document.createElement('th');
        h.appendChild(document.createTextNode(`Col ${i}`));
        r.appendChild(h)
    }

    tbl.appendChild(hd);
    const bd = document.createElement('tbody');
    tbl.appendChild(bd);

    for (let i = 1; i < table_size; i++) {
        const tr = bd.insertRow();
        for (let j = 0; j < table_size; j++) {
            const td = tr.insertCell();
            if (i == 0) {
                td.appendChild(document.createTextNode(`Col ${j}`));
            } else {
                td.appendChild(document.createTextNode(`this is a long string !!! Yes it is...`));
            }
        }
    }


    body.appendChild(tbl);

    $("table").attr("id", "myTable")
    $("table").attr("class", "display")
}



$(document).ready(function () {
    tableCreate();

    $('#myTable').DataTable({

        fixedHeader: true,
         fixedColumns: {
             left: 1
         },
        paging: false,
        searching: false
    });
});
javascript r shiny datatables dt
1个回答
0
投票

只需使用

autoWidth = TRUE
选项，请参阅链接

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.