Html table indicates column width in px not working

I am trying to create an ajax column resizing table, the interface works fine, but when I resize the column, the browser increases the table to 100%, eventually changing the other columns. I tried both of these two solutions, but none works well:

1.

min-width: 100%; table-layout: fixed; width: 100%; 

with this solution, I need to resize any single column before moving (if necessary) more than 100%; if I increase only one column, for example, all other columns are limited, they do not support the original width (as I would)

2.

 table-layout: fixed; 

Any ideas?

Edit: This is the corresponding html code:

 <table class="resizable" id="TabellaDati" ><thead> <tr> <th id="MDT_ThID"><span>ID</span></th> <th id="MDT_ThText" style="width: 146px;">Text</th> <th id="MDT_ThTitle" style="width: 148px;">Title</th> <th id="MDT_ThCssClass" style="width: 83px;">CssClass</th> <th id="MDT_ThUrl" style="width: 92px;">Url</th> <th id="MDT_ThOrdine">Ordine</th> </tr> </thead> <tbody> <tr> <td headers="MDT_ThID">MenuAlbo</td> <td headers="MDT_ThText">Albo Pretorio</td> <td headers="MDT_ThTitle">Albo Pretorio</td> <td headers="MDT_ThCssClass"></td> <td headers="MDT_ThUrl">/AlboPretorio</td> <td headers="MDT_ThOrdine">2</td> </tr> </tbody></table> 

And Css:

 #TabellaDati { min-width: 100%; table-layout: fixed; width: 100%; } table { border-collapse: collapse; } 
+4
source share
1 answer

I answered the question about setting column width using css a couple of days ago. This can help make sure that it is configured correctly. How to set table column width .. Basically I found that I need to set table width as well as th / etc. After that, the table-layout: fixed should work fine.

EDIT:
So, I missed that you had a cell width embedded in the line. So I downloaded your markup and css and it looks great. (I am using Chrome)

Then I was confused by what the problem was, and therefore I also realized that this is most likely an AJAX problem. I'm not so hot with AJAX, but I'm still checking this out.

UPDATE:
Is there a reason you should use Ajax? That is, what benefit you get using AJAX instead of plain Javascript, for example:

 var colText = document.getElementById('MDT_ThText'); function setWidth(w) { colText.style.width = w + "px"; } 

I feel that it will be easier for the whole world, and it will be well formatted with the markup and style that you have.

If you do not agree with the use of AJAX, please indicate that your code is regarding AJAX.

-1
source

Source: https://habr.com/ru/post/1332742/


All Articles