Question

我正在创建一个PDF文档，您可以在其中填写您的姓名，手机号码和签名。

我已经尝试了很多方法来创建它，这是当前的尝试，但是正如你可以这样，边缘被完全抛弃，因此表格/边框线随屏幕宽度调整非常重要。

那么我需要使用媒体查询来解决我的问题吗？

我不知道还有什么用于此工作，你有什么建议吗？

＆＃13;

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;*/
}

＆＃13;

<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>

＆＃13;

Answer 1

这是你的意思吗？

＆＃13;

      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;*/
        

    }

＆＃13;

<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>

＆＃13;

如何使用表和边框创建签名行

1 个答案: