在调整大小的表格单元格内显示div

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

<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

来源

2012-11-20 Rob A

好，我会张贴在元j08691但较少人会出现查看，因此没有真正改变使用的jsfiddle当具有格式化代码的需求压力较小。一个非常繁重的设计... –

我没有看到问题 – Rodolfo

我的不好，我没有更新小提琴，现在尝试链接。问题是，列更改大小 –

做到这一点的CSS。当表格宽度未定义或非常小时，这可能不起作用。

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

或者

td {width: 33.33%;}

来源

2012-11-20 18:55:36 mikeslattery

是的，我用jquery计算的百分比基于表th的数量，试图尝试这个表格布局固定，虽然 –

当添加静态宽度.container将解决您的问题，像这样：

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

我可能会建议废除表和一些人的div将所有内容封装在一起，并使用更多语义的东西。看起来它比列表数据更像是一个项目列表，所以你可以考虑把它放在无序列表中。

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

来源

2012-11-20 18:51:35 Joel

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

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

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

Here is the Fiddle

另外，不要使用ID名称以数字，比如#1“，因为它可以在某些浏览器失败。

来源

2012-11-20 19:09:29 Dan

这并没有解决我在Chrome上测试时的问题。 – mikeslattery

是的，那个ID只是小提琴。它可能很容易就是'asdf' –

在调整大小的表格单元格内显示div

回答

相关问题