在ie 7或ie 6里如何让超出td宽度的内容浮动显示在后面的td里_html/css_WEB-ITnose
<html><body style="font:16px Arial;"><style type="text/css">.table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial;}.row { height:25px;}.cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px;}</style><div style="width: 250px"><table width="100%" class="table"> <tr class="row"> <td class="cell"> <div style="white-space:nowrap;">Text Text Text Text Text Text Text Text</div> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> </tr></table></div></body></html>
如题和上述代码,在ie7标准模式下。
情形一:
如果表格上面有 table-layout: fixed; 这个样式,上述代码在页面上显示的效果是
情形二:
如果表格上面没有 table-layout: fixed; 这个样式,上述代码在页面上显示的效果是
很显然这两种结果都不理想。
在我现在的需求里,限于总体设计的因素,table标签上的table-layout: fixed; 是必须要有的。但是我又需要把单元格里超出单元格的那些内容浮动显示在它后面的各个单元格里,不能像情形二里那样直接把第一个单元格拉宽。理想效果如下
上面的理想效果目前在IE 8,Firefox,Chrome,Safari,Opera这几款浏览器里都实现了,就差ie 7,也许还有ie 6。
忘好心人指点。
回复讨论(解决方案)
这个太简单了,不用 fixed,用absolute
另外,你的table太多垃圾代码了。。样式其实可以很简化。。
<html><style type="text/css">body{font-size:12px; font-family:Tahoma, Geneva, sans-serif; height:25px; line-height:25px;}.table { border-collapse: collapse; table-layout: fixed; font: normal 11px arial;}.row { height:25px;}.cell { background-color:#ECF4FE; font-family:Arial,Verdana,sans-serif; font-size: 11px; border-bottom-width: 1px; border-bottom-color: #ECF4FE; border-bottom-style: dotted; border-top: none; border-left: 1px solid #EC0000; border-right: 1px solid #EC0000; vertical-align: middle; padding-left: 3px; padding-right: 3px;}.txt{position:absolute;}</style><body><div style="width: 250px"><div class="txt">Text Text Text Text Text Text Text Text</div><table width="100%" class="table"> <tr class="row"> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> <td class="cell"> </td> </tr></table></div></body></html>
楼上的,表格的存在还有什么意义呢...
楼上的,表格的存在还有什么意义呢...
这个我也不清楚,你问LZ
主要是功能能实现就好。
在DIV增加 position:relative,IE9通过;
Text Text Text Text Text Text Text Text | | | | |
IE6 也通过。
楼主的表格完全是一个背景嘛
楼主的表格完全是一个背景嘛
时过境迁,早就不用再处理这蛋疼的浏览器兼容性问题了。我记得这表格肯定不是背景,帖子里的是我截的图片,而且是专门为发帖造的例子,看起来像而已。
我觉得,用Table布局不好,希望多用div

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

HTML、CSS和JavaScript在Web開發中的作用分別是:1.HTML定義網頁結構,2.CSS控製網頁樣式,3.JavaScript添加動態行為。它們共同構建了現代網站的框架、美觀和交互性。

HTML的未來趨勢是語義化和Web組件,CSS的未來趨勢是CSS-in-JS和CSSHoudini,JavaScript的未來趨勢是WebAssembly和Serverless。 1.HTML的語義化提高可訪問性和SEO效果,Web組件提升開發效率但需注意瀏覽器兼容性。 2.CSS-in-JS增強樣式管理靈活性但可能增大文件體積,CSSHoudini允許直接操作CSS渲染。 3.WebAssembly優化瀏覽器應用性能但學習曲線陡,Serverless簡化開發但需優化冷啟動問題。

HTML的未來充滿了無限可能。 1)新功能和標準將包括更多的語義化標籤和WebComponents的普及。 2)網頁設計趨勢將繼續向響應式和無障礙設計發展。 3)性能優化將通過響應式圖片加載和延遲加載技術提升用戶體驗。

HTML、CSS和JavaScript在網頁開發中的角色分別是:HTML負責內容結構,CSS負責樣式,JavaScript負責動態行為。 1.HTML通過標籤定義網頁結構和內容,確保語義化。 2.CSS通過選擇器和屬性控製網頁樣式,使其美觀易讀。 3.JavaScript通過腳本控製網頁行為,實現動態和交互功能。

HTML是構建網頁結構的基石。 1.HTML定義內容結構和語義,使用、、等標籤。 2.提供語義化標記,如、、等,提升SEO效果。 3.通過標籤實現用戶交互,需注意表單驗證。 4.使用、等高級元素結合JavaScript實現動態效果。 5.常見錯誤包括標籤未閉合和屬性值未加引號,需使用驗證工具。 6.優化策略包括減少HTTP請求、壓縮HTML、使用語義化標籤等。

HTML的作用是通過標籤和屬性定義網頁的結構和內容。 1.HTML通過到、等標籤組織內容,使其易於閱讀和理解。 2.使用語義化標籤如、等增強可訪問性和SEO。 3.優化HTML代碼可以提高網頁加載速度和用戶體驗。

HTMLISNOTAPROGRAMMENGUAGE; ITISAMARKUMARKUPLAGUAGE.1)htmlStructures andFormatSwebContentusingtags.2)itworkswithcsssforstylingandjavascript for Interactivity,增強WebevebDevelopment。
