Question

我正在尝试使用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>

Answer 1

您无法更改表格宽度，因为父div.table的width：100px会更改它，并且表格宽度也会更改。

.table {
  position: absolute;
  top: 83%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

无法更改桌子宽度

1 个答案: