0

我在一个表格单元格中有一个 div，其 css 值为 display:none。当我 $.show() 它时，单元格会稍微向右扩展。当我使用可见属性而不是 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;
}

这是一个显示问题的小提琴

4

3 回答 3

1

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

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

或者

td {width: 33.33%;}
于 2012-11-20T18:55:36.720 回答
0

虽然向 .container 添加静态宽度将解决您的问题，如下所示：

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

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

我在这里提出了一个工作示例：http: //jsfiddle.net/ZYztj/

于 2012-11-20T18:51:35.557 回答
0

添加两个属性cellspacing="0",cellpading="0"到<table>, 和 CSS 规则：

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

将完全解决您的问题并跨浏览器。

这是小提琴

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

于 2012-11-20T19:09:29.503 回答