表と罫線を使用して署名行を作成する方法

Question

名前、携帯電話番号、署名を記入できるPDF文書を作成します。

Iveはこれを作成するさまざまな方法を試しましたが、これは現在の試みですが、できるだけ余白が完全に取り除かれているので、テーブル/境界線が画面の幅でサイズ変更されることが非常に重要です。

私は問題を解決するためにメディアクエリを使用する必要がありますか？

私はこれがうまくいくために他に何かを知っていません、あなたは何か提案がありますか？

body { 
 
    font-family: sans-serif; 
 
    line-height: 1.5em 
 
} 
 

 
tr, 
 
td { 
 
    width: 350px; 
 
    height: 40px; 
 
    font: 12px arial; 
 
    font-size: 15pt; 
 
    color: black 
 
} 
 

 
.field1 { 
 
    /*  background-color: #119494;*/ 
 
    /*  box-shadow: 1px 1px 1px black;*/ 
 
    width: 100px; 
 
    color: black; 
 
    font-size: 15px; 
 
    margin-left: -10% 
 
} 
 

 
.field { 
 
    /*  background-color: #119494;*/ 
 
    /*  box-shadow: 1px 1px 1px black;*/ 
 
    width: 10px; 
 
    color: black; 
 
    font-size: 15px; 
 
} 
 

 
.details { 
 
    background-color: cream; 
 
    width: 30px; 
 
    margin-left: 5%; 
 
    /*  background-color: lightgrey;*/ 
 
    border-bottom: 1px solid black; 
 
    margin-left: 50% 
 
    /*  text-shadow: 0px 1px 1px white;*/ 
 
} 
 

 
.details1 { 
 
    background-color: cream; 
 
    width: 700px; 
 
    /*  background-color: lightgrey;*/ 
 
    border-bottom: 1px solid black; 
 
    /*  text-shadow: 0px 1px 1px white;*/ 
 
}

<table> 
 

 
    <!--   <hr width="99%" size="4" color=#6C5B7B> --> 
 
    <tr> 
 
    <td class="field1"><strong>FULL NAME</strong></td> 
 
    <td class="details1"></td> 
 

 
    </tr> 
 
</table> 
 
<table> 
 
    <tr> 
 
    <td class="field"><strong>ID</strong></td> 
 
    <td class="details"></td> 
 
    <td class="field"><strong>SIGNATURE</strong></td> 
 
    <td class="details"></td> 
 

 
    </tr> 
 
    <tr> 
 
    <td class="field"><strong> CELL</strong></td> 
 
    <td class="details3"></td> 
 
    <td class="field"><strong>CAR REGISTRATION</strong></td> 
 
    <td class="details3"></td> 
 
    </tr> 
 

 
</table>

Answer 1

あなたは何を意味するかということですか？

 body{ 
 
      font-family:sans-serif; 
 
      line-height: 1.5em 
 
      
 
     } 
 
     tr, td{ 
 
     width: 350px; 
 
     height:40px; 
 
     font: 12px arial; 
 
     font-size:15pt; 
 
      color: black 
 
     
 
     
 
    } 
 
     
 
    .field1{ 
 
/*  background-color: #119494;*/ 
 
/*  box-shadow: 1px 1px 1px black;*/ 
 
     width:100px; 
 
     color:black; 
 
     font-size:15px; 
 
     margin-left:-10%  
 
      
 
     
 
    } 
 
     
 
    .field{ 
 
/*  background-color: #119494;*/ 
 
/*  box-shadow: 1px 1px 1px black;*/ 
 
     width:10px; 
 
     color:black; 
 
     font-size:15px; 
 
     
 
      
 
      
 
     
 
    } 
 
     
 
    .details{ 
 
     background-color:cream; 
 
     /* width:30px; */ /* no need */ 
 
     margin-left:5%; 
 
/*  background-color: lightgrey;*/ 
 
     border-bottom: 1px solid black; 
 
     margin-left:50% 
 
/*  text-shadow: 0px 1px 1px white;*/ 
 
     
 

 
    } 
 
       
 
    .details1{ 
 
     background-color:cream; 
 
     width:700px; 
 
     
 
/*  background-color: lightgrey;*/ 
 
     border-bottom: 1px solid black; 
 
/*  text-shadow: 0px 1px 1px white;*/ 
 
     
 

 
    }

<table> 
 
      
 
<!--   <hr width="99%" size="4" color=#6C5B7B> --> 
 
      <tr > 
 
       <td class="field1"><strong>FULL NAME</strong></td> 
 
       <td class="details1"></td> 
 
       
 
      </tr> 
 
    </table> 
 
    <table> 
 
      <tr> 
 
       <td class="field"><strong>ID</strong></td> 
 
       <td class="details"></td> 
 
       <td class="field"><strong>SIGNATURE</strong></td> 
 
       <td class="details"></td> 
 
        
 
      </tr> 
 
      <tr> 
 
       <td class="field"><strong> CELL</strong></td> 
 
       <td class="details"></td> <!-- changed the classname from details3 to details --> 
 
       <td class="field"><strong>CAR REGISTRATION</strong></td> 
 
       <td class="details"></td> <!-- changed the classname from details3 to details --> 
 
      </tr> 
 
       
 
      </table>