gpt4 book ai didi

html - 限制表格中div的宽度和高度

转载 作者:可可西里 更新时间:2023-11-01 14:56:35 26 4
gpt4 key购买 nike

在下面的 HTML 中,我面临两个问题:

  1. 生成的随机字符串不适合 td 的 15% 宽度。我不确定如何让 div 成为其父 td 的最大宽度(在这种情况下,屏幕宽度的 15% 和 min-width200px)

  2. 我不确定要给 #row2 多少百分比高度,因为虽然我希望整个表格的高度/宽度为 100%(和 #row1#row2 大一点 - 例如 60/40),但我希望 #row2 固定在 height >20px

<html>
<head>
<script language="javascript" type="text/javascript">
function randomString(string_length) {
var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz";
var randomstring = '';
for (var i=0; i<string_length; i++) {
var rnum = Math.floor(Math.random() * chars.length);
randomstring += chars.substring(rnum,rnum+1);
}
return randomstring;
}
function FillData(){
document.getElementById("query_div").innerHTML = randomString(1000);
document.getElementById("box1_div").innerHTML = randomString(1000);
}
</script>

<style type="text/css">
#global_table{
/*max-height: 300;
max-width: 500;
table-layout:fixed;*/
min-height:500px;
/*height:100%;*/
width:100%;
max-height:1500px;
}
#col1{
min-width:200px;
width:15%;
}
#col2{
min-width:200px;
width:20%;
}
#col3{
min-width:200px;
width:25%;
}
#col4{
min-width:200px;
width:15%;
}
#col5{
min-width:200px;
width:25%;
}
#row1{
/*max-height:400px;*/
height:200px;
overflow: hidden;
/*
height:50%;
*/
}
#row2{
height:300px;
/*
max-height:20px;
height:5%;
*/
}
#row3{
height:300px;
/*
max-height:200px;
min-height:400px;
*/
/*
height:45%;
*/
}
#left_box{
}
#query_div{
overflow: hidden;
word-break: break-all;
height: 1em; /* I don't know if you want whis */
}
#box1_div{
overflow: hidden;
word-break: break-all;
height: 1em;
}
.hidden{
height:0px;
/*visibility:hidden;*/
}
</style>
</head>
<body onload="FillData()">
<table id="global_table" border="2">
<!--
<colgroup>
<col id="col1"/>
<col id="col2"/>
<col id="col3"/>
<col id="col4"/>
<col id="col5"/>
</colgroup>
-->
<tr class="hidden">
<td id="col1" class="hidden">
<td id="col2" class="hidden">
<td id="col3" class="hidden">
<td id="col4" class="hidden">
<td id="col5" class="hidden">
</tr>

<tr id="row1">
<td id="left_box" rowspan="3"><div id="query_div">Test</div></td>
<td><div id="box1_div">Box 1</div></td>
<td colspan="2"><div id="box2_div">Box 2</div></td>
<td><div id="box3_div">Box 3</div></td>
</tr>
<tr id="row2">
<td rowspan="2" colspan="2"><div id="box4_div">Box 4</div></td>
<td colspan="2"><div id="box4_div">Box 5</div></td>
</tr>
<tr id="row3">
<td colspan="2"><div id="box6_div">Box 6</div></td>
</tr>
</table>
</body>
</html>

最佳答案

也许这就是您要找的,请参阅 demo fiddle .

问题一)

#query_div{
overflow: hidden;
word-break: break-all;
height: 1em; /* I don't know if you want whis */
}

问题2)

#row2{
height: 20px;
}

关于html - 限制表格中div的宽度和高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6969489/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com