当表格的文本方向设置为 rtl 时，标题排序图标与文本重叠答案

【问题标题】：Header Sort Icon overlapping with text when table's text direction is set to rtl当表格的文本方向设置为 rtl 时，标题排序图标与文本重叠
【发布时间】：2021-09-17 14:44:22
【问题描述】：

我一直在尝试使用制表符创建表格，但我遇到了一个问题，即当表格的文本方向设置为 rtl 时，文本与排序器图标重叠，因为排序器图标与它通常在（当表是 ltr 时）。我附上了一个代码 sn-p 以显示问题。 A picture of the visual problem

是否可以在 JavaScript 或 CSS 中附加一些设置，以允许排序器图标正确显示，或者排序箭头与 rtl 表/文本方向完全不兼容。

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>

【问题讨论】：

那个分拣机是绝对定位的，用right: 4px; ...把right改成left，就完成了。

标签： javascript html css tabulator

【解决方案1】：

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

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

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

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

这是添加了上述 CSS 的 sn-p。

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>

【讨论】：

【解决方案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>

【讨论】：

感谢您的帮助！我在 CSS 方面的经验不如我在使用 JavaScript 图形较少的方面哈哈。