gpt4 book ai didi

html - 具有绝对内容的表格单元格的宽度

转载 作者:行者123 更新时间:2023-11-28 09:01:47 25 4
gpt4 key购买 nike

我需要我的表格尽可能宽,即使它的内容是绝对的并且比整个页面更宽。因此,当我缩放并且顶部架构 div 变得更宽时,表格将扩展其单元格。谢谢。

.topToolbar,.botToolbar{
background-color: red;
height:100%;
}

.leftToolbar,.rightToolbar{
background-color: blue;
width:100%;
height:100%;;
}
.mdi{
position:relative;
overflow:auto;
width:100%;
height:100%;
background-color: grey;
}
.schema{
border:10px solid green;
position:absolute;
top:300px;
left:300px;
width:600px;
height:300px;
background-color:white;
}
.schemaBot, .schemaTop{
border:10px solid green;
top:0px;
position:absolute;
left:600px;
width:600px;
height:30px;
background-color:white;
}
.schemaLeft, .schemaRight{
border:10px solid green;
position:absolute;
top:300px;
left:0;
width:30px;
height:300px;
background-color:white;
}
.tbl tr:first-child td,.tbl tr:last-child td{
position:relative;
height:50px;
}
.tbl tr:nth-child(2) td:first-child,.tbl tr:nth-child(2) td:last-child{
position:relative;
width:50px;
height:100%;
}

.tbl tr:nth-child(2) td:nth-child(2){


}
.tbl{
border-spacing:0px;
min-width:100%;
height:100%;
}
td{
padding:0px;
}

html, body{
height:100%;
margin:0px;
}
<!DOCTYPE html>

<body>
<table class="tbl">
<tr>
<td colspan=3>
<div class="topToolbar">
<div class="schemaTop"></div>
</div>
</td>
</tr>
<tr>
<td>
<div class="leftToolbar">

</div>
</td>
<td>
<div class="mdi">
<div class="schema"></div>
</div>
</td>
<td>
<div class="rightToolbar">

</div>
</td>
</tr>
<tr>
<td colspan=3>
<div class="botToolbar">
<div class="schemaBot"></div>
</div>
</td>
</tr>
</table>

</body>

最佳答案

将您的 schemaTop 类设置为宽度 100%。

   .schemaBot, .schemaTop{
border: 10px solid green;
top: 0px;
position: absolute;
height: 30px;
background-color: white;
width: 100%;
}

试试这个

 .schemaBot, .schemaTop{
border: 10px solid green;
top: 0px;
position: absolute;
left: 36%;
width: 36%;
height: 30px;
background-color: white;
}

关于html - 具有绝对内容的表格单元格的宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26882933/

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