TD元素在縮小的瀏覽器窗口上換行

我有一張表，其列中包含兩個內嵌div，一個顯示圖像，另一個顯示文本並排排列。所以每個td都是矩形的，右邊是圖像，左邊是文字（單行）。這個問題（發生在所有瀏覽器中）是當我縮小水平瀏覽器尺寸時，而不是保持固定寬度並添加水平滾動條，它將包裝文本並將其移動到圖像下，從而縮小td。無論瀏覽器的寬度如何，我可以讓td寬度保持不變？哦，如果它影響它，兩個div都有相對定位，這樣我可以在td內稍微調整它們的位置。另外，我無法修復td的寬度，因爲每個列的寬度必須根據文本略有不同。由於TD元素在縮小的瀏覽器窗口上換行

<td> 
    <div style="display:inline;position:relative;"> 
    <img src="some_image.jpg" /> 
    </div> 
    <div style="display:inline;position:relative;"> 
    some short text 
    </div> 
</td>

來源

2010-10-15 aeq

您可以添加「NOWRAP屬性到TD：

<td nowrap>

或風格它：

td {white-space:nowrap;}

來源

2010-10-15 13:25:41 Hollister

的感謝！那就是所有這一切。 – aeq 2010-10-15 13:33:18

不用擔心。我相信你知道CSS方法是首選。 – Hollister 2010-10-15 14:15:31

基本上你的問題是正確的，在這個問題：「我如何才能讓TD的寬度，以保持固定......另外，我無法修復TD的寬度，因爲......」 :)

無論如何，有兩種可能的解決方案，我可以想到。

如果您知道要允許的表的最大寬度，可以將其包裝在具有固定寬度的div中。這樣，你的頁面的主體不會縮小到包裝div的寬度，因此它不會推到你的桌子上。
使用javascript修復頁面加載後td的寬度。這樣它就會固定到它的內容擴展到的任何寬度。您應該能夠從offsetWidth屬性的td中獲取寬度。

來源

2010-10-15 13:23:07 Splashdust

TD元素在縮小的瀏覽器窗口上換行

回答

相關問題