HTML表中的長線污染其他線的佈局

我有一個HTML表格作爲頁面佈局（我知道不好的做法）。此表是這樣的東西：HTML表中的長線污染其他線的佈局

Label1 Value1 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d

我只是補充說，可以說是相當大的排隊一個一個校驗錯誤消息，所以現在是：

Label1 Value1 ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b Value4c Value4d

爲了使設計工作我已經向包含驗證消息的單元添加一個colspan，以便跨越整個表格。它適用於長度足夠小的錯誤消息，不會溢出表格。除此之外，我得到：

Label1 Value1 Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d

4號線完全搞砸了。有沒有辦法指定錯誤消息單元格內容應該溢出表格，而不是擴大同一列中其他單元格的空間？也許一些神奇的CSS？

來源

2009-04-22 David Reis

爲了使文本在表格外延伸，文本元素要麼必須在更高的層次（層次），比表格，或者它必須與表格無關。

Label1 Value1 <span class="outside">Veeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeery long ErrorMessage</span> 
Label2 Value2 
Label3 Value3 
Label4 Value4a Value4b     Value4c    Value4d

然後給外面類：

你可以做這樣的事情完成後

.outside 
{ 
    position:absolute; 
}

你將不得不做一些進一步的格式，以獲得它展現出來校正位置。

編輯：

剛剛意識到，如果你利用何塞的想法以及和跨越，而不是格格式化清理了一下。

table 
{ 
    table-layout:fixed; 
    width:100em; 
}

來源

2009-04-22 01:00:59 Joel

這是非常hackish，但可能適合您的情況。如果可能，爲每個內容單元提供靜態寬度。然後添加一個沒有寬度的額外單元格。最後一個單元格應該展開，讓其他單元以其設定的寬度展開。

編輯：根據你的評論你也可以嘗試在錯誤消息中提供更高的z-index在CSS中。您還需要設置消息position才能完成此項工作。

來源

2009-04-22 00:32:00 Jeremy

我真的不想提供靜態寬度，因爲我的所有界面都是可定製的。最好的辦法是讓單元格文字覆蓋表格而不是放大表格。 – 2009-04-22 00:40:02

好吧，這裏是我的測試解決方案，並在Firefox 3的工作原理：

<style type="text/css"> 
#error { 
    width: inherit; 
    overflow: auto; 
    padding: 0; 
    margin: 0; 
} 
</style> 

<table width="400"> 
    <tr> 
    <td width="100">A</td> 
    <td colspan="3" width="300"> 
     <div id="error">Really long line...</div> 
    </td> 
    </tr> 
    <tr> 
    <td>1A</td> 
    <td>1B</td> 
    <td>1C</td> 
    <td>1D</td> 
    </tr> 
    <tr> 
    <td>2A</td> 
    <td>2B</td> 
    <td>2C</td> 
    <td>2D</td> 
    </tr> 
</table>

來源

2009-04-22 00:51:09 Calvin

當長度超過300像素時，會使長線纏繞。雖然這是我的偏好，但我不確定這是David想要的。 – Joel 2009-04-22 01:22:08

HTML表中的長線污染其他線的佈局

回答

相關問題