html - 无法更改表格宽度
问题描述
我正在尝试使用 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>
解决方案
您无法更改表格宽度,因为父 div.table 有 width:100px 更改它并且您的表格宽度会改变。
.table {
position: absolute;
top: 83%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
}
推荐阅读
- c# - TextBox 上的 StringFormat 阻止输入
- jenkins - Jenkins Pipeline 上的动态参数取决于分支
- reactjs - Gatsby 如何在 React 组件和之前生成的静态 HTML 内容之间共享 React 标头
- javascript - Office.js 选择文本并将其替换为 ContentControl
- angularjs - 正则表达式不允许特定域电子邮件 id 角度 js
- c++ - 擦除前的 C++ 复制向量范围
- wpf - XAML:在每一行的底部插入虚线
- c# - 为什么 DataGrid 列崩溃?
- dart - 在颤振中进行导航的其他方法是什么
- cytoscape.js - 如何在 cytoscape 中创建密钥?