匹配網頁上不同元素的寬度。 HTML IE7和IE8

在下面的代碼我需要匹配的寬度縮小窗口時：匹配網頁上不同元素的寬度。 HTML IE7和IE8

<div style="background-color:blue;">The title</div> 
<table> 
    <tr> 
    <td> Column title </td> 
    <td>Content</td> 
    <td>Column title2</td> 
    <td>Content 2</td> 
    </tr> 
</table>

這僅僅是頁面的一個小例子，它會涉及更多的div和表格。

當我縮小窗口時，表格和div會根據需要收縮，因此div會比表格縮小，這會使頁面看起來很難看。

當表格無法縮小時，有什麼辦法可以阻止div縮小嗎？

我試過min-with，它不起作用，我已經問過類似的東西，但顯然沒有任何JavaScript的東西。

你們能否給我一個JavaScript以外的解決方案？

在此先感謝。

塞薩爾。

來源

2010-01-20 Amra

爲什麼不是最小寬度的工作？ – Alsciende 2010-01-20 10:51:18

IE不支持它我認爲（IE 6沒有）...它在Opera中工作（剛選中），我相信它也可以在FF中工作 – Veger 2010-01-20 10:53:32

我沒有IE7 +測試這一點，但在Opera它的工作原理，當你把所有的HTML中的外部div塊。比外部的div塊與表格相同。所以在某一點上，它不再適合瀏覽器窗口，但現在外部塊有其寬度，標題div保持與外部塊相同的寬度。

<div style="background-color:red;"> 
    <div style="background-color:blue;">The title</div> 
    <table> 
    <tr> 
     <td> Column title </td> 
     <td>Content</td> 
     <td>Column title2</td> 
     <td>Content 2</td> 
    </tr> 
    </table> 
</div>

來源

2010-01-20 10:41:20 Veger

我也是這麼做的。 – Alsciende 2010-01-20 10:53:43

謝謝，我已經嘗試過，但它沒有工作（我猜瀏覽器的緩存在玩弄我:-)）。 – Amra 2010-01-20 11:00:40

您可以使用THEAD和列跨度顯示錶內標題：

<table> 
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead> 
<tbody> 
    <tr> 
    <td> Column title </td> 
    <td>Content</td> 
    <td>Column title2</td> 
    <td>Content 2</td> 
    </tr> 
</tbody> 
</table>

獎勵點：你的表結構現在會更有意義從一個角度無障礙點。

您還可以使用標題元素，但它的格式可能是不夠的：

<table> 
<caption style="background-color:blue;">The title</caption> 
    <tr> 
    <td> Column title </td> 
    <td>Content</td> 
    <td>Column title2</td> 
    <td>Content 2</td> 
    </tr> 
</table>

來源

2010-01-20 10:37:28 Alsciende

感謝Alsciende，您提出的第一個解決方案不在tbody內部的行中，但是因爲我剛剛編輯了問題代碼，它只是一個有很多div和表的小例子。 – Amra 2010-01-20 10:45:15

對於第二個你說的格式化，但無論如何感謝。 :-) – Amra 2010-01-20 10:46:27

匹配網頁上不同元素的寬度。 HTML IE7和IE8

回答

相關問題