Search code examples
javascriptjqueryhtml-tabletablesorter

Stop Dynamic Table Resizing

I have a table using: 

<script src="/js/jquery.tablesorter.min.js"></script>
<script src="/js/jquery.tablesorter.widgets.min.js"></script>

The layout of the table looks like this:

enter image description here

When you click the blue edit button on the right the button should disappear and a green check and red X should appear. This allows the row to be edited. It enables the input fields for that row which are originally disabled:

enter image description here

The problem is that whenever I click the buttons that shows or hides the other buttons my table resizes to the left. The Modify row increases in width. Is there a way to stop the dynamic resizing of this Javascript table? I tried using Javascripts show/hide for the buttons and also using a CSS class called hiddenButtons which has display none and hiding the buttons that way but both attempts resized the table.

Solution

  • If you give each td in your final column that has the header "modify" a class and then give that class a defined width of your choice. This should stop happening.

    The HTML/Browser is automatically stretching the TDs out to what it believes is even for the content within them. Adding or removing content from a td without a defined width will do this.