Home >Web Front-end >HTML Tutorial >Why can't the table height be fixed? _html/css_WEB-ITnose
Why can't the table height be fixed? _html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:23:121803browse
I set the f5d188ed2c074f8b944552db028f98a1 table height to 100%, and then divided the table into three rows. I want these three rows to equally divide the height, each with 33%. However, if the data in the table exceeds this height, the table will It will change. I want it to be fixed, and the maximum cannot exceed 33%
CSS can achieve the effect in firefox, but not in 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;}. Reply to discussion (solution)
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> 94415add74ff53f1905f4bd0509ebdd0
This is a dynamically generated data table f5d188ed2c074f8b944552db028f98a1 with more or less content
The main thing is this paragraph:
/* 主布局框架,三行一列 */.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> This can be set, but if there are two layers of DIVs nested inside, it won’t work. The data is written in the innermost DIV.
f5d188ed2c074f8b944552db028f98a1
a34de1251f0d9fe1e645927f19a896e8
b6c5a531a458a2e790c1fd6421739d1c -->Writing here can be divided equally
left
The final result is as follows:
div.s1 is on the left, div.s2 is on the right, and div.t is inside s2. The table divides the web page into three equal parts. The rows of data in t are variable, and there will be a scroll bar if the height exceeds the height
| s1 | |
| |--- - s2 ----|
| | | t |
-------------------
| s1 | -- s2 ----|
| | | t |
-------------------
| s1 | --- s2 ----|
| | | t |
-------------------
You can use this code as Example:
I've done it, just replace the table with a div....
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In this case, as long as you enter content in the text box, it will be automatically submitted to ajax. How can you click the submit button to submit? _html/css_WEB-ITnoseNext article：In this case, as long as you enter content in the text box, it will be automatically submitted to ajax. How can you click the submit button to submit? _html/css_WEB-ITnose