Bug 25242: Improve column wrapping and overflow for tables

This patch attempts to improve the column wrapping and prevent
datatabels from overlapping with other content on high zoom levels/low
width screen sizes.

Test plan
1/ Build the OPAC CSS from the updated SCSS
2/ Navigate to various tables in the OPAC (Holds table is a good one)
and 'play' with various window sizes and zoom levels.
3/ The table should not overlap with right navigation content
4/ Signoff

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
Signed-off-by: Katrin Fischer <katrin.fischer.83@web.de>

Signed-off-by: Jonathan Druart <jonathan.druart@bugs.koha-community.org>

diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
index ea5a396..e59ab8d 100644 (file)
--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
@@ -221,11 +221,14 @@ legend {
 
 table {
     font-size: 90%;
+    table-layout: fixed;
 }
 
 table,
 td {
     background-color: #FFF;
+    word-wrap: break-all;
+    word-wrap: break-word;
 }
 
 tr {
@@ -255,6 +258,8 @@ td {
 
 th {
     background-color: #E2E8E8;
+    word-wrap: break-all;
+    word-wrap: break-word;
 
     &.sum {
         text-align: right;