在調整大小的表格單元格內顯示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

回答

相關問題