Home > Article > Web Front-end > Questions about the layout of front-end controls_html/css_WEB-ITnose
Please take a look at the picture:
The table in this picture (the one with the border) is an image. Originally, I planned to use this as a background image, but it cannot be enlarged and the effect will not be good after running. It looks good, so I added img to the Body, set its width and height to 100%, and then added a control where the text should be entered. The picture above shows what it looks like after adding the control and before running. I put each All controls are placed in a div, and the position is set to absolute, but after running, it becomes like this, which is difficult to read:
. Is there any known method or technique, or how can I put it? Background image enlargement?
<style> .t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;} .tr{border-right:1px solid #000;} .tb{border-bottom:1px solid #000;} td{padding:5px;} table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0"> <tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0"> <tr><td><select> <option>男</option> </select></td><td>身份证号码</td><td><input/></td></tr> </table></td></tr></table>
Since img is displayed in percentage, then the left top and width of div Height also needs to be positioned using percentages
<style> .t1>tbody>tr>td{border-top:1px solid #000;border-left:1px solid #000;} .tr{border-right:1px solid #000;} .tb{border-bottom:1px solid #000;} td{padding:5px;} table table td{border-bottom:1px solid #000;border-right:1px solid #000;}</style><table class="t1" cellpadding="0" cellspacing="0"> <tr><td>申请人姓名</td><td class="tr"><input/></td></tr><tr><td class="tb">性别</td><td style="padding:0px;"><table cellpadding="0" cellspacing="0"> <tr><td><select> <option>男</option> </select></td><td>身份证号码</td><td><input/></td></tr> </table></td></tr></table>