CSS溢出：????和表或其他方法？

我有一張寬度爲640px的桌子，分爲兩個[TD]。左邊的是150px，右邊的是490px。CSS溢出：????和表或其他方法？

問題是，使用CSS或任何其他方法，我如何阻止內容溢出我設置的大小，並使頁面看起來像一團糟。

我已經嘗試了CSS溢出：滾動方法，在某些情況下，這可以工作，但不是全部。我需要每次都能工作的東西。如果我可以讓每個TD滾動，如果內容更大，那肯定就足夠了。

我沒有鏈接提供，這只是一個普遍的問題，因爲我會在我的網站上有很多地方需要使用類似的東西。

謝謝

來源

2010-07-23 Theoden

如果你使用表格作爲你網站的支柱，那麼你做錯了。你應該使用div元素。表格應該用於表格數據，而不是結構。

有時使用表格的時候很難快速找到外觀，但這不是不可能的。對於2行的表，你可以使用這樣的事情

 
    <div id="container"> 
     <div id="left"> 
     <div id="right"> 
     <div class="clr" > 
    </div>

CSS：

 
#container{ 
    width: 640px; 
} 
#left{ 
    width: 150px; 
    flot: left; /*if you want them to be next to each other */ 
    overflow: scroll; /*or hidden?*/ 
} 
#right{ 
    width: 490px; 
    float: left; 
    overflow: scroll; 
} 
.clr { 
    clear: both; 
}

來源

2010-07-23 17:25:28 Ventus

我至今兩個答案同意 - 理想的解決方案是重新編碼佈局不表，但如果你沒有時間，在<div>包裹你的表格單元格中的內容就可以了：

HTML

<table> 
    <tr> 
     <td class="left"> 
      <div>This is your left content</div> 
     </td> 
     <td class="right"> 
      <div>This is your right content</div> 
     </td> 
    </tr> 
</table>

CSS

table { 
    width: 640px; 
} 

td div { 
    overflow: scroll; 
} 

td.left, 
td.left div { 
    width: 150px; 
} 

td.right, 
td.right div { 
    width: 490px; 
}

增加的<div>「在你的內容旨意尊重CSS overflow屬性，防止非打破內容炸燬佈局。

來源

2010-07-23 17:39:07 Pat

好的，也許我現在還不夠好。但想想這就像留言本一樣，你的名字和城市在左邊，你的意見在右邊。每個條目還有一個12px灰色條的標題，左邊是日期，右邊是刪除鏈接。這是在PHP while循環中。我從來沒有在這個莊園中使用過DIVS，因爲在這些情況下我仍然發現桌子更好，因爲您不必預先定義所有的容器，特別是如果您做的每個容器都是不同的尺寸 - 甚至在同一頁上的不同尺寸 - 我有。 – Theoden 2010-07-23 17:57:36

我甚至在發帖之前也試過你的建議，但沒有成功。謝謝 – Theoden 2010-07-23 17:59:12

這很奇怪......如果你看看這個小提琴http://jsfiddle.net/HCZeS/1/，你會看到它的工作。也許在你的CSS /標記中還有其他的東西導致了這個問題。 – Pat 2010-07-23 18:31:33

由於您使用的是固定寬度，因此您需要在table元素上設置table-layout: fixed。

來源

2010-07-23 18:59:04 ScottS

CSS溢出：????和表或其他方法？

回答

相關問題