Question

我在表格单元格中有一个div，其css值为display：none。当我$ .show（）时，单元格略微向右扩展。当我使用visible属性而不是display：none时，这可以正常工作，但如果不需要，我不想保留高度。我尝试了各种显示属性，以及重新排列CSS宽度，边距和填充，以及删除背景图像。

   <div id='1'>
<table>
    <tr>
        <td>
            <div class='container'>
                <div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
                <div>header</div>
                <div>
                    <input type='button' value='add to cart'/>
                </div>
            </div>

        </td>
        <td>
<div class='container'>
                <div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
                <div>header</div>
                <div>
                    <input type='button' value='add to cart'/>
                </div>
            </div>
        </td>
        <td>
            <div class='container'>
                <div class='error'>I am some long ass error that breaks my layout and I can't figure out what to do.</div>
                <div>header</div>
                <div>
                    <input type='button' value='add to cart'/>
                </div>
            </div>
        </td>
    </tr>
</table>
</div>

    #1{width:400px;}
table {width:100%;}
tr {border: solid grey;}
.container{
    border-right: 1px dotted #A5A5A5;
    margin: 25px 0;
}
div {

    display:block;
    margin:auto;
    text-align:center;
}
.error {
    display:none;
    padding-left:20px;
    width:80px;
    table-layout:fixed;
}

这是fiddle showing the problem

Answer 1

对CSS执行此操作。当表格宽度未定义或非常小时，这可能不起作用。

table {width:100%; table-layout: fixed;}

或者

td {width: 33.33%;}

Answer 2

向.container添加静态宽度可以解决您的问题：

.container{
   border-right: 1px dotted #A5A5A5;
   float: left;
   margin: 25px 0;
   width: 250px; 
}

我可能会建议一起使用表和一些div包装器并使用更多语义的东西。看起来它更多的是项目列表而不是表格数据，因此您可以考虑将其放在无序列表中。

我在这里提出了一个有效的例子： http://jsfiddle.net/ZYztj/

Answer 3

将两个属性cellspacing="0"，cellpading="0"添加到<table>，以及 CSS规则：

tr, td {
    margin: 0;
    padding: 0;
}

完全修复您的问题并跨浏览器。

Here is the Fiddle

此外，永远不要使用以数字开头的ID名称，例如#1，因为它可能会在某些浏览器中失败。

在表格单元格中显示div并调整大小

3 个答案: