gpt4 book ai didi

html - 强制 HTML 表格行填满屏幕

转载 作者:行者123 更新时间:2023-11-28 05:28:11 24 4
gpt4 key购买 nike

我知道类似的问题已经被问过很多次了,我已经尝试了一个又一个的回答,但都无济于事。我正在尝试格式化 HTML 页面,并尝试使用表格来定位所有内容。

因此,我使用表格创建了一个 3x3 网格,并在其中填充了我想要包含的信息。我遇到的问题是空单元格不占用空间,这意味着带有空单元格的行或列的格式不正确。

有没有办法强制我的行填满窗口的整个高度?我想让所有 9 个“单元格”大小相等。谢谢!

下面是一种格式化尝试。我在单元格周围添加了边框,使它们更明显,并删除了存储在我计算机上的图像:

<!doctype HTML>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>
<style>
html {height: 100%; width: 100%;}
body {background-color: black; min-width: 100%; min-height: 100%;font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;}
table {table-layout: fixed; width: 100%; min-height: 100%; border: 1px solid white;}
#outer {width: 100%; height: 100%;}
#img {float: left}
.container {width=33%; height=33%; border-radius: 3px; background-color: #afafaf;}
#inner {}
.text {color: black; font-size: 16px;}
#sub {margin-left:45%; width: 10%; text-align: center; color: black}
#nAcc {margin:auto; text-align: center; color: black}
td, tr {border: 1px solid white;}
.spacing {height=100% width=100%;};
a {text-decoration: none;}

</style>

<title>Ethan's Messenger</title>
</head>
<body>
<div class="spacing">
<table id="outer">
<tr>
<td id="img"><img src="" id="logo" /></td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>
<div class="container">
<form><table id="inner">
<tr>
<td class="text">Username:</td>
<td><input type="text" style="width:100%"></element></td>
</tr>
<tr>
<td class="text">Password:</td>
<td><input type="text" style="width:100%"></element></td>
</tr>
<tr><td colspan="2"><input type="submit" id="sub"></element></td></tr>
<tr><td colspan="2"><a href="/nAcc/"><p id="nAcc">Create A New Account</p></a></td></tr>
</table></form>
</div>
</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>
</div>
</body>
</html>

html {
height: 100%;
width: 100%;
}
body {
background-color: black;
min-width: 100%;
min-height: 100%;
font-family: 'Audiowide', Lucida Console, Lucida, sans-serif;
}
table {
table-layout: fixed;
width: 100%;
min-height: 100%;
border: 1px solid white;
}
#outer {
width: 100%;
height: 100%;
}
#img {
float: left
}
.container {
width=33%;
height=33%;
border-radius: 3px;
background-color: #afafaf;
}
#inner {} .text {
color: black;
font-size: 16px;
}
#sub {
margin-left: 45%;
width: 10%;
text-align: center;
color: black
}
#nAcc {
margin: auto;
text-align: center;
color: black
}
td,
tr {
border: 1px solid white;
}
.spacing {
height=100% width=100%;
}
;
a {
text-decoration: none;
}
<link href='https://fonts.googleapis.com/css?family=Audiowide' rel='stylesheet' type='text/css'>



<div class="spacing">
<table id="outer">
<tr>
<td id="img">
<img src="" id="logo" />
</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>
<div class="container">
<form>
<table id="inner">
<tr>
<td class="text">Username:</td>
<td>
<input type="text" style="width:100%">
</element>
</td>
</tr>
<tr>
<td class="text">Password:</td>
<td>
<input type="text" style="width:100%">
</element>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" id="sub">
</element>
</td>
</tr>
<tr>
<td colspan="2">
<a href="/nAcc/">
<p id="nAcc">Create A New Account</p>
</a>
</td>
</tr>
</table>
</form>
</div>
</td>
<td>&nbsp</td>
</tr>
<tr>
<td>&nbsp</td>
<td>&nbsp</td>
<td>&nbsp</td>
</tr>
</table>
</div>

最佳答案

我不确定这是否是您想要的结果,但是如果您将 tableheight 更改为 100vh它将填满整个 View ,而不是 100%

关于html - 强制 HTML 表格行填满屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38662153/

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