Блог

Сертификат

Я пытаюсь создать сертификат, используя HTML и CSS, но по какой-то причине я не могу изменить ширину таблицы…Несмотря на то, что я установил ширину таблицы, но ширина таблицы по-прежнему не меняется, как вы все можете видеть на изображении выше, ширина таблицы остается неизменной.

Мой код:

 <!Doctype&&t;
<html&&t;

<head&&t;
  <style&&t;
    <meta name="viewport"content="width=device-width, initial-scale=1"&&t;
    <style&&t;
    .container {
      position: relative;
      text-ali&n: 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 {
  paddin&: 5px;
  text-ali&n: left;    
}

  </style&&t;
</head&&t;

<body&&t;

  <div class="container"&&t;
    <im& src="l3.jp&" hei&ht="800" width="800" class="l3" alt="im&3" /&&t;
    <im& src="l1.jp&" style="ali&n:left" width="100" hei&ht="100" class="l1" alt="im&1" /&&t;
    
    
    
    <im& src="l2.pn&" style="ali&n:ri&ht" width="100" hei&ht="100" class="l2" alt="im&2" /&&t;<br/&&t;<br/&&t;<br/&&t;
    
    <div class="OC"&&t;OCCUPANCY CERTIFICATE</div&&t;

    <div class="centered" style="color: li&htblue"&&t;This is to certify that the buildin& described herein has been inspected and confirms substantially to the approved drawin&s amp; to the requirements of all the applicable codes, laws, rules and re&ulations that were in place at the time of the issue of this certificate.</div&&t;
 
  
  
  <div class="table"&&t;
  <table class="table"&&t;

  <tr&&t;
    <th&&t;Name of Owner</th&&t;
    <th&&t;Plot Number</th&&t;
    <th colspan="2"&&t;Location</th&&t;
  </tr&&t;
  
  <tr&&t;
   <th&&t;Buildin& Type</th&&t;
    <th&&t;Thram Number</th&&t;
    <th colspan="2"&&t;Desi&nated </th&&t;
  </tr&&t;
  
    <tr&&t;
   <th&&t;Flat Type</th&&t;
    <th&&t;Plot  Area</th&&t;
    <th colspan="2"&&t;Plot Covera&e</th&&t;
  </tr&&t;
  
    <tr&&t;
   <th rowspan="2" colspan="2"&&t;Number of Floors</th&&t;
    <th rowspan="2"&&t;No. of Units</th&&t;
    <th&&t;Residential </th&&t;
    
  </tr&&t;
  
      <tr&&t; 
    <th&&t;Commercial</th&&t;
  </tr&&t;
  
   <tr&&t;
   <th rowspan="2" colspan="2"&&t;Date of final Inspection</th&&t;
    <th rowspan="2"&&t;Floor Area</th&&t;
    <th&&t;Residential area</th&&t;
    
  </tr&&t;
  
     <tr&&t; 
    <th&&t;Commercial area</th&&t;
  </tr&&t;
  
   
     <tr&&t; 
    <th colspan="4"&&t;Remarks (if any):</th&&t;
  </tr&&t;
  
  
</table&&t;

</div&&t;

</div&&t;

</body&&t;

</html&&t;
  

вы не можете изменить ширину таблицы, потому что родительский div.table имеет ширину: 100px измените ее, и ваша ширина таблицы изменится.

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