Hél*_*éna 8 html javascript css
我遇到的问题是我在不同的div上分别制作了一张桌子和一些箭头.但是,如果我更改浏览器或放大页面,那些div不能同时移动并变大或变小.
目前我正在做的是建造一张大桌子.在这个大表内,有许多小表:对于每一行的块,它是一个表,所以有多少行有多少个表.箭头在一个新的div中,它的位置是"绝对的",我改变左/上位置来调整它的位置.
有人建议我怎么能解决这个问题,提前谢谢.
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
Position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
<!----each arrow has a div---->
<div class="NetMartinArrow">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
小智 3
我不确定您在代码中的何处使用 .NetMarginArrow css 类。另外，CSS 区分大小写。在您的代码中，“p”是 .NetMarginArrow 类中位置的大写字母。确保 html body 的高度为 100%。容器充当所有元素的包装器。请尝试下面的代码。
<html>
<head>
<title>Dupont Model</title>
<style type="text/css">
html, body {
height: 100%;
}
#container {
position: relative;
}
.table { //for tables
position: absolute;
width: 633px;
height: 309px;
left: 0px;
top: -35px;
}
.NetMarginArrow {
position: absolute;
width: 180px;
height: 115px;
left: 428px;
top: 166px;
}
<------each arrow is asigned with a div class--->
</style>
</head>
<body>
<h3> Model</h3>
<div id="container">
<div class="table"> <!--for tables (each block)-->
<table style border="0" cellpadding="0">
<!---a big table contains many small tables---->
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#C4E1FF"><b>Net Profit</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{net_profit}}</td>
<tr><tr><tr>
</tr>
<tr><td bgcolor="#C4E1FF"><b>Sales</td></b></tr>
<tr>
<td bgcolor="#F0F0F0"> {{sales.sales__sum}}</td>
<tr><tr><tr>
</tr>
</td></table>
<td><table border="0" cellspacing="10" cellpadding="10">
<tr><td bgcolor="#D2E9FF"><b>Gross Margin</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{gross_margin}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Tax</b></td><td></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{tax}}</td>
</tr>
<tr>
<tr><td bgcolor="#D2E9FF"><b>Total Expenses</b></td></tr>
<tr>
<td bgcolor="#F0F0F0"> {{total_expenses}}</td>
</tr>
<tr><td></td></tr><tr><td></td></tr><tr><tr>
</td></table>
</table>
</div>
</div>
<!----each arrow has a div---->
<div class="NetMartinArror">
<td><table border="0" cellpadding="0"> <!--Arrow after Net profit-->
<td>←<td><table style="height:230px;width:15px;border-color:000000;border-top-style:solid;border-left-style:solid;border-bottom-style:solid;border-width:2px"><tr><td valign="top"></td></tr></td></table>
</td></table>
</div>
............................same to all arrows.............
</body>
</html>
我添加了容器作为所有 HTML 元素的包装器。
| 归档时间： |
|
| 查看次数： |
291 次 |
| 最近记录： |