Question

我有一个表格，每行都有一个内容可编辑的div表格，当您在内容区域中键入内容时，该表格具有colspan，第一列的大小会缩小，从而会更改div的大小。最终它自动换行。我不希望表格的布局发生变化（水平）。我该如何预防？

<table style="width: 100%">
    <thead>
        <tr><th>id</th><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td>2</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

这个没有第一栏的人不会这么做。

<table style="width: 100%">
    <thead>
        <tr><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

Answer 1

尝试向表格标题添加宽度

<th style="width: 100px">

所以当内容大小减小时，列的宽度不会改变。

Answer 2

如果未定义其width，则由于其内容，表列始终动态地改变宽度。在您的情况下，width仅为div内的td 定义（并且具有相对值：100％，仅填充{{ 1}}，并且由于td本身没有任何td设置，如果还有更多内容，这也会导致td扩展，这不会影响wifth，因此宽度根据内容而变化。

Answer 3

我正在使用的解决方案使用@ G-Cyr和@Amanullah Tanweer的点

HTML

<table class="has-comments">
    <thead>
        <tr><th>id</th><th>Comments</th><th>Other stuff</th></tr>
    </thead>
    <tbody>
        <tr><td>1</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
        <tr><td>2</td><td colspan="2"><div contenteditable="true" style="min-height: 1em; width: 100%; border: 1px solid red;"></div></td></tr>
    </tbody>
</table>

CSS

table.has-comments {
    width: 100%;
}

javascript

$("table.has-comments tr:first-child th").each(function(index){
    let element = $(this);
    let width = element.width();
    element.css("width", width + "px");
});
$("table.has-comments").css("table-layout", "fixed");

结果是，我让页面设置了表格（宽度100％），然后javascript / jQuery修复了列宽。最后，表格布局设置为固定。我知道，这不是最有效的解决方案，但是我的页面是通过jsp动态呈现的，并且每天都在变化。

为什么表格列会更改大小，如何停止它

3 个答案: