Header 当 table 的文本方向设置为 rtl 时，排序图标与文本重叠

Question

我一直在尝试使用制表符创建 table，但我运行遇到了一个问题，即当 table 的文本出现时，文本与排序器图标重叠direction 设置为 rtl，因为排序器图标保持在与通常相同的位置（当 table 为 ltr 时）。我附上了一个代码片段以显示问题。 A picture of the visual problem

我可以在 JavaScript 或 CSS 中附加一些设置，这将使排序器图标正确显示，或者排序箭头是否与 rtl 不兼容 table/text方向。

let data = [{
    שם: "חנה",
    מקצוע: "טבחית",
    גיל: 56
  },
  {
    שם: "אברהם",
    מקצוע: "מלצר",
    גיל: 24
  },
  {
    שם: "חיים",
    מקצוע: "טבח",
    גיל: 19
  },
  {
    שם: "מאיה",
    מקצוע: "טבחית",
    גיל: 24
  },
  {
    שם: "שרה",
    מקצוע: "מלצרית",
    גיל: 51
  },
  {
    שם: "אביגיל",
    מקצוע: "מארחת",
    גיל: 21
  },
  {
    שם: "נור",
    מקצוע: "מלצרית",
    גיל: 54
  },
  {
    שם: "יוסף",
    מקצוע: "מלצר",
    גיל: 36
  },
  {
    שם: "עומר",
    מקצוע: "מלצר",
    גיל: 37
  },
  {
    שם: "אריאל",
    מקצוע: "טבחית",
    גיל: 41
  },
  {
    שם: "מחמוד",
    מקצוע: "מארח",
    גיל: 24
  },
  {
    שם: "ג'מיל",
    מקצוע: "מארח",
    גיל: 45
  },
];
let table = new Tabulator("#myTable", {
  data: data,
  layout: "fitDataTable",
  columns: [{
      title: "שם",
      field: "שם"
    },
    {
      title: "מקצוע",
      field: "מקצוע"
    },
    {
      title: "גיל",
      field: "גיל"
    },
  ],
});

<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
  <vis id="myTable"> </vis>
</body>

</html>

Answer 1

查看tabulator stylesheet，.tabulator-col-sorter使用绝对定位。

将此添加到您自己的样式表中：

.tabulator-col-sorter {
    right: auto !important;
    left: 0;
}

如果您的样式运行在 tabulator stylesheet 之后，则您不需要使用 !important 规则。

这是添加了上述 CSS 的代码段。

let data = [{
    שם: "חנה",
    מקצוע: "טבחית",
    גיל: 56
  },
  {
    שם: "אברהם",
    מקצוע: "מלצר",
    גיל: 24
  },
  {
    שם: "חיים",
    מקצוע: "טבח",
    גיל: 19
  },
  {
    שם: "מאיה",
    מקצוע: "טבחית",
    גיל: 24
  },
  {
    שם: "שרה",
    מקצוע: "מלצרית",
    גיל: 51
  },
  {
    שם: "אביגיל",
    מקצוע: "מארחת",
    גיל: 21
  },
  {
    שם: "נור",
    מקצוע: "מלצרית",
    גיל: 54
  },
  {
    שם: "יוסף",
    מקצוע: "מלצר",
    גיל: 36
  },
  {
    שם: "עומר",
    מקצוע: "מלצר",
    גיל: 37
  },
  {
    שם: "אריאל",
    מקצוע: "טבחית",
    גיל: 41
  },
  {
    שם: "מחמוד",
    מקצוע: "מארח",
    גיל: 24
  },
  {
    שם: "ג'מיל",
    מקצוע: "מארח",
    גיל: 45
  },
];
let table = new Tabulator("#myTable", {
  data: data,
  layout: "fitDataTable",
  columns: [{
      title: "שם",
      field: "שם"
    },
    {
      title: "מקצוע",
      field: "מקצוע"
    },
    {
      title: "גיל",
      field: "גיל"
    },
  ],
});

.tabulator-col-sorter {
  right: auto !important;
  left: 0;
}

<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
  <vis id="myTable"> </vis>
</body>

</html>

Answer 2

你可以简单地添加一些 css

.tabulator-arrow {
    position: fixed;
}

let data = [{
    שם: "חנה",
    מקצוע: "טבחית",
    גיל: 56
  },
  {
    שם: "אברהם",
    מקצוע: "מלצר",
    גיל: 24
  },
  {
    שם: "חיים",
    מקצוע: "טבח",
    גיל: 19
  },
  {
    שם: "מאיה",
    מקצוע: "טבחית",
    גיל: 24
  },
  {
    שם: "שרה",
    מקצוע: "מלצרית",
    גיל: 51
  },
  {
    שם: "אביגיל",
    מקצוע: "מארחת",
    גיל: 21
  },
  {
    שם: "נור",
    מקצוע: "מלצרית",
    גיל: 54
  },
  {
    שם: "יוסף",
    מקצוע: "מלצר",
    גיל: 36
  },
  {
    שם: "עומר",
    מקצוע: "מלצר",
    גיל: 37
  },
  {
    שם: "אריאל",
    מקצוע: "טבחית",
    גיל: 41
  },
  {
    שם: "מחמוד",
    מקצוע: "מארח",
    גיל: 24
  },
  {
    שם: "ג'מיל",
    מקצוע: "מארח",
    גיל: 45
  },
];
let table = new Tabulator("#myTable", {
  data: data,
  layout: "fitDataTable",
  columns: [{
      title: "שם",
      field: "שם"
    },
    {
      title: "מקצוע",
      field: "מקצוע"
    },
    {
      title: "גיל",
      field: "גיל"
    },
  ],
});

.tabulator-arrow {
    position: fixed;
}

<!DOCTYPE html>
<html lang="he" dir="rtl">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://unpkg.com/tabulator-tables@4.9.3/dist/js/tabulator.min.js"></script>
  <link href="https://unpkg.com/tabulator-tables@4.9.3/dist/css/tabulator.min.css" rel="stylesheet" />
</head>

<body>
  <vis id="myTable"> </vis>
</body>

</html>

Header 当 table 的文本方向设置为 rtl 时，排序图标与文本重叠

Header Sort Icon overlapping with text when table's text direction is set to rtl

html

javascript

css

tabulator