Repository: mwouts/itables (language: python)

Issue:
Long column names overlay
![image](https://user-images.githubusercontent.com/43007010/134821375-f700cb37-b178-425e-aba9-085f8c91cfd6.png)

Columns names should either show "aaa..." with option to hover or either be in the minimum width of the column name.

Thanks for this package :)


Discussion / hints:
Any update? I am also facing this problem

Fix patch:
diff --git a/CHANGELOG.md b/CHANGELOG.md
index f5ce6fd7..925149f4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,11 @@
+0.4.1 (2022-01-06)
+==================
+
+Fixed
+-------
+- Long column names don't overlap any more (#28)
+
+
 0.4.0 (2022-01-06)
 ==================
 
diff --git a/itables/datatables_template.html b/itables/datatables_template.html
index f9103cb0..ddf6e497 100644
--- a/itables/datatables_template.html
+++ b/itables/datatables_template.html
@@ -4,6 +4,10 @@
     text-overflow: ellipsis;
     overflow: hidden;
 } </style>
+<style> table th {
+    text-overflow: ellipsis;
+    overflow: hidden;
+} </style>
 <script type="module">
     // Load the eval_functions_js function if required
     // eval_functions_js
diff --git a/itables/version.py b/itables/version.py
index 5e444a37..6a3b10ee 100644
--- a/itables/version.py
+++ b/itables/version.py
@@ -1,3 +1,3 @@
 """ITables' version number"""
 
-__version__ = "0.4.0"
+__version__ = "0.4.1"


Test patch:
diff --git a/tests/test_long_column_names.md b/tests/test_long_column_names.md
new file mode 100644
index 00000000..9da84a51
--- /dev/null
+++ b/tests/test_long_column_names.md
@@ -0,0 +1,39 @@
+---
+jupyter:
+  jupytext:
+    text_representation:
+      extension: .md
+      format_name: markdown
+      format_version: '1.3'
+      jupytext_version: 1.13.5
+  kernelspec:
+    display_name: itables
+    language: python
+    name: itables
+---
+
+In this notebook we display a dataframe with very long column names.
+
+```python
+import pandas as pd
+df = pd.DataFrame({"short name": [0] * 5,
+                   "very " * 5 + "long name": [0] * 5,
+              "very " * 10 + "long name": [1] * 5,
+              "very " * 20 + "long name": [2] * 5,
+              "nospacein" + "very" * 50 + "longname": [3] * 5,
+              "nospacein" + "very" * 100 + "longname": [3] * 5})
+```
+
+In Pandas the long names result in a very wide HTML table, however the columns don't overlap.
+
+```python
+df
+```
+
+With `datatables.net` the column width are fixed and because of this the columns did overlap when the style of `table th` was not set (issue #28). Note that, with the default `display` class, long columns names made of multiple words are wrapped onto multiple lines.
+
+```python
+from itables import init_notebook_mode, show
+init_notebook_mode()
+show(df)
+```