我正在尝试使用HTML和CSS创建证书,但是由于某些原因,我无法更改表格的宽度...即使我已设置表格的宽度,但表格的宽度却是仍然没有变化,正如您在上图中所看到的,表的宽度保持不变。
我的代码:
<!Doctype>
<html>
<head>
<style>
<meta name="viewport"content="width=device-width, initial-scale=1">
<style>
.container {
position: relative;
text-align: center;
color: white;
}
.l1 {
position: absolute;
top: 100px;
left: 400px;
}
.l2 {
position: absolute;
top: 100px;
left: 850px;
}
.l3 {
position: absolute;
top: 10px;
left: 270px;
}
.OC{
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.table {
position: absolute;
top: 83%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
}
table, th, td {
border: 1px solid black;
border-collapse: collapse;
width: 100px;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<div class="container">
<img src="l3.jpg" height="800" width="800" class="l3" alt="img3" />
<img src="l1.jpg" style="align:left" width="100" height="100" class="l1" alt="img1" />
<img src="l2.png" style="align:right" width="100" height="100" class="l2" alt="img2" /><br/><br/><br/>
<div class="OC">OCCUPANCY CERTIFICATE</div>
<div class="centered" style="color: lightblue">This is to certify that the building described herein has been inspected and confirms substantially to the approved drawings & to the requirements of all the applicable codes, laws, rules and regulations that were in place at the time of the issue of this certificate.</div>
<div class="table">
<table class="table">
<tr>
<th>Name of Owner</th>
<th>Plot Number</th>
<th colspan="2">Location</th>
</tr>
<tr>
<th>Building Type</th>
<th>Thram Number</th>
<th colspan="2">Designated </th>
</tr>
<tr>
<th>Flat Type</th>
<th>Plot Area</th>
<th colspan="2">Plot Coverage</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Number of Floors</th>
<th rowspan="2">No. of Units</th>
<th>Residential </th>
</tr>
<tr>
<th>Commercial</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Date of final Inspection</th>
<th rowspan="2">Floor Area</th>
<th>Residential area</th>
</tr>
<tr>
<th>Commercial area</th>
</tr>
<tr>
<th colspan="4">Remarks (if any):</th>
</tr>
</table>
</div>
</div>
</body>
</html>
答案 0 :(得分:0)
您无法更改表格宽度,因为父div.table的width:100px会更改它,并且表格宽度也会更改。
.table {
position: absolute;
top: 83%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}