How to use a table and borders to create signature lines - html

Question

Im creating a PDF document, where you would be able to fill in your name, cell phone number and signature.
Ive tried numerous ways to create this, this is the current attempt, but as you can so the margins are being thrown off completely, so its very important that the table/border-lines resizes with the screen width.
So would i need to use a media query to solve my problem?
I dont know what else to use for this to work, do you have any suggestions?
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

Is that what you meant?
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>