ホームページ >ウェブフロントエンド >htmlチュートリアル >なぜテーブルの高さを固定できないのですか？ _html/css_WEB-ITnose
なぜテーブルの高さを固定できないのですか？ _html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 12:23:121803ブラウズ
f5d188ed2c074f8b944552db028f98a1 テーブルの高さを 100% に設定し、テーブルを 3 つの行に分割します。ただし、テーブル内のデータがこの高さを超える場合は、これら 3 つの行の高さを均等に分割します。 , テーブルが変わります。修正してほしいのですが、最大値は 33% を超えることはできません
CSS は Firefox では効果を実現できますが、IE8 では実現できません
CSS:
/* 页面设置 */html,body,form{ width:100%; height:100%; max-height:100%;}/* 主布局框架,三行一列 */.tbparent{ width:100%; height:95%; max-height:100%; border:1px solid;}tbody{ height:100%; min-height:100%; max-height:100%;}/* 三行均分height *//*.tbparent tr{ height:3%; width:100%; max-height:3%;}*/.tbparent td{ width:100%; height:33%; min-height:33%; max-height:33%;}/* 线别信息,主框架 */.father{ width:100%; height:100%; max-height:100%; border:1px solid; margin-bottom:0px;}/* 线别信息,标题 */.son1{ width:13%; height:100%; max-height:100%; background-color:Green; color:yellow; text-align:left; border:1px solid; float:left; line-height:35px;}/* 线别信息,制程/料号 */.son2{ width:21%; height:100%; max-height:100%; border:1px solid; padding-left:5px; float:left; font-family:Microsoft JhengHei; font-size:16px;}/* 料号列表 */.partlist{ width:100%; height:100%; max-height:73%; overflow:auto; border-top:1px; border-top-style:dashed; text-align:left; padding-left:5px; margin-top:3px; line-height:3px;}.partlist table{ width:auto; height:auto; max-height:100%; overflow:scroll;}。 ディスカッションへの返信 (解決策)
html:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="losepart.aspx.cs" Inherits="LosePart_losepart" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>发料单</title> <link href="losepart.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="losepart.js"></script></head><body> <form id="form1" runat="server"> <div> <table class="tbparent"> <tr> <td> <div class="father" style="width: 100%" > <div class="son1" > <span> <b>线别:</b> <select id="linename_1" onchange="get_lose_info('1')" style="width: 78px"> </select> </span> <span id="lineinfo_1"></span> </div> <div class="son2"> <span><b>制程:</b><select id="procname_1" onchange="get_lose_info_id('1','1')" style="width: 95px"> </select> <input id="part_info_index_1" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_1" type="text" onkeypress="send_part(event,1)" style="width: 107px" /> </span> <div id="partlist_1" class="partlist" > </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_2" onchange="get_lose_info_id('1','2')" style="width: 95px"></select> <input id="part_info_index_2" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_2" type="text" onkeypress="send_part(event,2)" style="width: 107px" /> </span> <div id="partlist_2" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_3" onchange="get_lose_info_id('1','3')" style="width: 95px"></select> <input id="part_info_index_3" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_3" type="text" onkeypress="send_part(event,3)" style="width: 107px" /> </span> <div id="partlist_3" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_4" onchange="get_lose_info_id('1','4')" style="width: 95px"></select> <input id="part_info_index_4" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_4" type="text" onkeypress="send_part(event,4)" style="width: 107px" /> </span> <div id="partlist_4" class="partlist"> </div> </div> </div> </td> </tr> <tr> <td ><div class="father" > <div class="son1" > <span> <b>线别:</b> <select id="linename_2" onchange="get_lose_info('2')" style="width: 78px"> </select> </span><span id="lineinfo_2"></span> </div> <div class="son2"> <span><b>制程:</b><select id="procname_5" onchange="get_lose_info_id('2','5')" style="width: 95px"></select> <input id="part_info_index_5" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_5" type="text" onkeypress="send_part(event,5)" style="width: 107px" /> </span> <div id="partlist_5" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_6" onchange="get_lose_info_id('2','6')" style="width: 95px"></select> <input id="part_info_index_6" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_6" type="text" onkeypress="send_part(event,6)" style="width: 107px" /> </span> <div id="partlist_6" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_7" onchange="get_lose_info_id('2','7')" style="width: 95px"></select> <input id="part_info_index_7" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_7" type="text" onkeypress="send_part(event,7)" style="width: 107px" /> </span> <div id="partlist_7" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_8" onchange="get_lose_info_id('2','8')" style="width: 95px"></select> <input id="part_info_index_8" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_8" type="text" onkeypress="send_part(event,8)" style="width: 107px" /> </span> <div id="partlist_8" class="partlist"> </div> </div> </div> </td> </tr> <tr> <td ><div class="father" > <div class="son1" > <span> <b>线别:</b> <select id="linename_3" onchange="get_lose_info('3')" style="width: 78px"> </select> </span><span id="lineinfo_3"></span> </div> <div class="son2"> <span><b>制程:</b><select id="procname_9" onchange="get_lose_info_id('3','9')" style="width: 95px"></select> <input id="part_info_index_9" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_9" type="text" onkeypress="send_part(event,9)" style="width: 107px" /> </span> <div id="partlist_9" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_10" onchange="get_lose_info_id('3','10')" style="width: 95px"></select> <input id="part_info_index_10" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_10" type="text" onkeypress="send_part(event,10)" style="width: 107px" /> </span> <div id="partlist_10" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_11" onchange="get_lose_info_id('3','11')" style="width: 95px"></select> <input id="part_info_index_11" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_11" type="text" onkeypress="send_part(event,11)" style="width: 107px" /> </span> <div id="partlist_11" class="partlist"> </div> </div> <div class="son2"> <span><b>制程:</b><select id="procname_12" onchange="get_lose_info_id('3','12')" style="width: 95px"></select> <input id="part_info_index_12" type="hidden" style="width: 13px" /></span><br /> <span><b> 料号:</b><input id="partno_12" type="text" onkeypress="send_part(event,12)" style="width: 107px" /> </span> <div id="partlist_12" class="partlist"> </div> </div> </div> </td> </tr> </table> </div> </form> </body></html> f46036dfa86d2dc86a8e87d3db68a54b これは、次の内容を含む動的に生成されたデータ テーブルc97ed25cbe2283fd0e9facdd8ee08567 です。以下
主にこの段落:
/* 主布局框架,三行一列 */.tbparent{ width:100%; height:95%; max-height:100%; border:1px solid;}tbody{ height:100%; min-height:100%; max-height:100%;}/* 三行均分height *//*.tbparent tr{ height:3%; width:100%; max-height:3%;}*/.tbparent td{ width:100%; height:33%; min-height:33%; max-height:33%;} <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style type="text/css">/* 主布局框架,三行一列 */.tbparent{ width:100%; height:90px; max-height:100%; border:1px solid;} tbody{ height:100%; min-height:100%; max-height:100%;} /* 三行均分height */.tbparent tr{ width:100%; max-height:33px; height:30px;background-color:#ddd; display:inline-block;} .tbparent td{ float:left; display:block; width:33%; height:inherit; overflow:hidden;}</style></head><body><table class="tbparent"> <tbody> <tr> <td>用ie7测试正常但ie8第一个会扩大怎么解决</td> <td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站</td> <td> fffffffffffff </td> </tr> <tr> <td>用ie7测试正常但ie8第一个会扩大怎么解决</td> <td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站</td> <td> fffffffffffff </td> </tr> <tr> <td>用ie7测试正常但ie8第一个会扩大怎么解决</td> <td>W3School 提供的内容仅用于培训。我们不保证内容的正确性。通过使用本站内容随之而来的风</td> <td> fffffffffffff </td> </tr> </tbody></table></body></html> これは設定できますが、内部に 2 つの層の DIV がネストされている場合は機能しません。データは最も内側の DIV に書き込まれます。
＆lt＆lt; tr＆gt;
最終結果は次のようになります:
div.s1 は左側、div.s2 は右側、div.t は s2 の中にあります。この表は、Web ページを 3 つの等しい部分に分割します。 t のデータ行は不定であり、高さが
を超えるとスクロール バーが表示されます。
|
| ---
|
|--- s2 ----|
|
完了しました。テーブルを div に置き換えるだけです....
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。