使元素的寬度取決於其祖父母的動態寬度 - 雖然具有固定寬度父母

皮烏，聽起來很複雜，是吧？我試圖儘可能好地描述它。所以基本上，我們有三個元素：寬度爲auto的div，寬度恰好爲500的表格和寬度也應爲auto的表格，但完全取決於表格的單元格寬度。使元素的寬度取決於其祖父母的動態寬度 - 雖然具有固定寬度父母

讓我給你看：

<div> 
    <table> 
    <tr> 
     <td><span>Some random content</span></td> 
     <td><span>Some random content</span></td> 
    </tr> 
    <tr> 
     <td><span>Some random content</span></td> 
     <td><span>Some random content</span></td> 
    </tr> 
    </table> 
</div>

這裏的CSS;與提高的透明度的邊界：

table, tr, td { 
    border: 1px solid black; 
} 

table { 
    width: 500px; 
} 

span { 
    border: 1px dotted red; 
    display: block; 
    word-wrap: break-word; 
} 

div { 
    border: 1px dotted green; 
}

渲染，它看起來像這樣：

enter image description here

完美的罰款。注意到綠色的虛線邊框？這是div：與瀏覽器窗口一樣寬。現在

enter image description here

看綠色邊框：但是，如果我調整了整個事情，它看起來像這樣的DIV適當調整自身預期。儘管如此，紅色虛線邊框（跨度）仍然與表格一樣寬。是否有可能根據div調整自己，而不是調整到桌面，這樣您仍然可以閱讀整個文本？

在此先感謝。

來源

2014-06-27 Qelix

我不清楚你在這裏想達到什麼目的。你爲什麼不把'div'修改爲500px，並將'table'的寬度設置爲100％？ –

我認爲'width：inherit'就夠了。 –

好吧，它不那麼容易。這個例子非常簡單，實際的表格是一個很重要的腳本。它需要保持在這個尺寸，並應適用於多種窗口大小。除此之外 - 它不會工作，我只是試過。 – Qelix

嘗試爲表格寬度設置百分比，使其變得像流水線一樣寬度：如果屏幕大小爲1920px，則爲26％。 500/1920 * 100.所以他會適應屏幕大小，但是如果您想要全屏固定寬度，並且必須使用一些媒體查詢後才能縮小。

來源

2014-06-27 09:53:39 AlexDom

使元素的寬度取決於其祖父母的動態寬度 - 雖然具有固定寬度父母

回答

相關問題