我正在尝试制作一个 ajax 列可调整大小的表格,界面工作正常,但是当我调整列大小时,浏览器将表格最大放大 100%,最终调整其他列的大小。 我已经尝试过这两种解决方案,但没有一个效果很好:
1.
min-width: 100%;
table-layout: fixed;
width: 100%;
使用此解决方案,我需要在(如有必要)超过 100% 之前调整任何单个列的大小;例如,如果我只放大一列,所有其他列都受到限制,它们不会保持原始宽度(我会这样做)
2.
table-layout: fixed;
有什么想法吗?
编辑: 这是相关的 html 代码:
<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>
和 Css:
#TabellaDati {
min-width: 100%;
table-layout: fixed;
width: 100%;
}
table {
border-collapse: collapse;
}
最佳答案
我前几天回答了一个关于用css设置列宽的问题。这可能有助于确保首先正确设置。 How to set table column width..基本上我发现我需要设置表格宽度以及 th/td。之后 table-layout: fixed 应该可以正常工作。
编辑:
所以,我错过了您将单元格宽度设置为内联。所以我加载了您的标记和 CSS,看起来很棒。 (我正在使用 Chrome)
然后我很困惑问题是什么,所以我也意识到这很可能是 AJAX 问题。我对 AJAX 不是很感兴趣,但我仍在检查它。
更新:
是否有必须使用 Ajax 的理由?也就是说,通过使用 AJAX 而不是像这样的普通 ol' Javascript,您可以获得什么好处:
var colText = document.getElementById('MDT_ThText');
function setWidth(w) {
colText.style.width = w + "px";
}
我觉得这会让整个世界变得更简单,并且它的格式与您拥有的标记和样式保持一致。
如果您坚持使用 AJAX,请提供您使用 AJAX 的代码。
关于Html 表格以 px 指定列宽不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4488703/