Html table specify columns width in px does not work

Question

I'm trying to make an ajax columns-resizable table, the interface works fine, but when I resize the columnns, the browser enlarges the table at max 100%, resizing eventually other columns. I've tried with both this two solutions but no one works well:

1.

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

with this solution, I need to resize any single column before going (if necessary) over 100%; if I enlarge only one column, for example, all the others columns are restricted, they does not maintain the original width (as I would)

2.

table-layout: fixed;

Any ideas?

Edit: This is the relevant 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 the Css:

#TabellaDati {
    min-width: 100%;
    table-layout: fixed;
    width: 100%;
}
table {
    border-collapse: collapse;
}

score -1 · Answer 1 · edited May 23 '17 at 12:23

I answered a question on setting column width with css a couple of days ago. It may help to make sure that is set up correctly first.How to set table column width.. Basically I found I needed to set the table width as well as the th/td. After that the table-layout: fixed should work alright.

EDIT:
SO, I missed that you had the cell width set inline. So I loaded your markup and css and that looks great. (I'm using Chrome)

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

UPDATE:
Is there a reason why you must use Ajax? That is, what benefit are you gaining by using AJAX instead of plain ol' Javascript like this:

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

I feel like this would be a whole world easier, and it stays well formatted with the markup and styling you have.

If you are adamant in using AJAX, please provide what your code regarding AJAX.

Html table specify columns width in px does not work

1 Answers1