filamentgroup / tablesaw

A group of plugins for responsive tables.
MIT License
5.48k stars 434 forks source link

Text in cell cropped. #353

Closed MeGA-ct closed 2 years ago

MeGA-ct commented 6 years ago

Hi, I have the following issue with swipe table:

When set the css rule white-space: nowrap for th elements, if there are some colums that have more width than the first ones, the text appears croped for the last column, I have also done some reseach and noticed that swipe always try to maximize the numer of colums as pointed in #74 discussion, but that makes this issue to appear.

It's there a way to preset the height of th cells before swiping, or make the swipe action to recalc how many columns to show?

Attached an example html of table wiwith the issue

<!DOCTYPE html>
<html>
<head>
    <title>ExampleTable</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../dist/tablesaw.css">
    <script src="../../dist/dependencies/jquery.js"></script>
    <script src="../../dist/tablesaw.js"></script>
    <style>
        th {white-space: nowrap;}
    </style>
</head>
<body>
    <table data-tablesaw-mode="swipe" data-tablesaw-minimap="" 
class="c-table s-editor s-editor--table tablesaw">
        <thead>
            <tr>
                <th scope="col" data-tablesaw-priority="persist">TEST1</th>
                <th scope="col">TEST1</th>
                <th scope="col">TEST1</th>
                <th scope="col">TEST1</th>
                <th scope="col">extras XAS&nbsp;</th>
                <th scope="col">extras XAS 153</th>
                <th scope="col">extras XAS153</th>
                <th scope="col">origin X</th>
                <th scope="col">origin</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data1</td>
                <td>data1</td>
                <td>data1</td>
                <td>data1</td>
                <td>data1 name</td>
                <td>data1 name</td>
                <td>data1</td>
                <td>data1</td>
                <td>data1</td>
            </tr>
            <tr>
                <td>data2</td>
                <td>data2</td>
                <td>data2</td>
                <td>data2</td>
                <td>DDDDDDDD</td>
                <td>-</td>
                <td>xxxx-xxxxx 230</td>
                <td>○</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>data3</td>
                <td>data3</td>
                <td>data3</td>
                <td>data3</td>
                <td>DDDDDDDD</td>
                <td>-</td>
                <td>xxxx-xxxxx 240</td>
                <td>○</td>
                <td>&nbsp;</td>
            </tr>
        </tbody>
    </table>
</body>
</html> 
zachleat commented 5 years ago

Hmm, looks like a bug with the column sizing logic here. Good test case, thanks!