蹊跷HTML表格

我创建注册的Gmail作为类似的形式，但在表行，其中用户选择他birthday.Probably因为我设置的节日td到colspan=2。如何解决这个问题，我不能对TD标签改变大小代码行看起来很好看吗？蹊跷HTML表格

<!DOCTYPE html> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title>Title</title> 
 
    <link rel="stylesheet" type="text/css" href="styleForme.css"> 
 
</head> 
 
<body> 
 
    <div style="background-color: whitesmoke; width: 320px; height: 800px; position: relative; left: 800px; padding: 20px"> 
 
    <form> 
 
    <table style="table-layout: auto"> 
 
     <!--Unos imena i prezimena--> 
 
     <tr> 
 
      <td style="font-weight: bold ;font-family: monospace;font-size: 14px;">Name</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="text" name="FirstName" placeholder="First" style="width: 150px; height: 20px"> 
 
      </td> 
 
      <td> 
 
       <input type="text" name="LastName" placeholder="Last" style="width: 150px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!-- Kreiranje username-a --> 
 
     <tr> 
 
      <td style="font-weight: bold;font-family: monospace;font-size: 14px;" colspan="2">Choose your username</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <input type="text" placeholder="@gmail.com" style="width: 308px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!--Kreiranje sifre--> 
 
     <tr> 
 
      <td style="font-weight: bold; font-family: monospace;font-size: 14px;">Create a password</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <input type="password" style="width: 308px; height: 20px" > 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!--Potvrda sifre--> 
 
     <tr> 
 
      <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Confirm your password</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
       <input type="password" style="width: 308px; height: 20px" > 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!--Kreiranje datuma rodjenja--> 
 
     <tr> 
 
      <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Birthday</td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <select> 
 
       <option>January</option> 
 
       <option>February</option> 
 
       <option>March</option> 
 
       <option>April</option> 
 
       <option>May</option> 
 
       <option>June</option> 
 
       <option>July</option> 
 
       <option>August</option> 
 
       <option>September</option> 
 
       <option>October</option> 
 
       <option>November</option> 
 
       <option>December</option> 
 
       </select> 
 
      </td> 
 
      <td> 
 
       <input type="text" maxlength="2" placeholder="Day" style="width: 50px"> 
 
      </td> 
 
      <td> 
 
       <input type="text" maxlength="4" placeholder="Year" style="width: 50px"> 
 
      </td> 
 
     </tr> 
 
    </table> 
 
    </form> 
 
    </div> 
 
</body> 
 
</html>

来源

2017-02-11 ground

如何使用display:table每个<tr>和display:table-cell;每个<td>

（注：使用固定的像素尺寸为高度/宽度属性通常不是最佳实践这些天由于屏幕尺寸的不同性质考虑使用响应式框架，如Foundation前进）

<body> 
 
    <div style="background-color: whitesmoke; width: 320px; height: 800px; position: relative; left: 800px; padding: 20px"> 
 
    <form> 
 
     <table style="table-layout: auto"> 
 
     <!--Unos imena i prezimena--> 
 
     <tr> 
 
      <td style="font-weight: bold ;font-family: monospace;font-size: 14px;">Name</td> 
 
     </tr> 
 
     <tr style="display:table"> 
 
      <td> 
 
      <input type="text" name="FirstName" placeholder="First" style="width: 150px; height: 20px"> 
 
      </td> 
 
      <td> 
 
      <input type="text" name="LastName" placeholder="Last" style="width: 150px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!-- Kreiranje username-a --> 
 
     <tr> 
 
      <td style="font-weight: bold;font-family: monospace;font-size: 14px;" colspan="2">Choose your username</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <input type="text" placeholder="@gmail.com" style="width: 308px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!--Kreiranje sifre--> 
 
     <tr> 
 
      <td style="font-weight: bold; font-family: monospace;font-size: 14px;">Create a password</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <input type="password" style="width: 308px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <!--Potvrda sifre--> 
 
     <tr> 
 
      <td colspan="2" style="font-weight: bold; font-family: monospace;font-size: 14px;">Confirm your password</td> 
 
     </tr> 
 
     <tr> 
 
      <td colspan="2"> 
 
      <input type="password" style="width: 308px; height: 20px"> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td>&nbsp;</td> 
 
     </tr> 
 
     <tr style="display:table"> 
 
      <td style="width:70px; display:table-cell; margin-left: 0;"> 
 
      <select> 
 
       <option>January</option> 
 
       <option>February</option> 
 
       <option>March</option> 
 
       <option>April</option> 
 
       <option>May</option> 
 
       <option>June</option> 
 
       <option>July</option> 
 
       <option>August</option> 
 
       <option>September</option> 
 
       <option>October</option> 
 
       <option>November</option> 
 
       <option>December</option> 
 
      </select> 
 
      </td> 
 
      <td> 
 
      <input type="text" maxlength="2" placeholder="Day" style="width:70px; display:table-cell; margin: 0 34px"> 
 
      </td> 
 
      <td> 
 
      <input type="text" maxlength="4" placeholder="Year" style="width:70px; display:table-cell; margin-right: 0;"> 
 
      </td> 
 
     </tr> 
 
     </table> 
 
    </form> 
 
    </div> 
 
</body>

来源

2017-02-11 20:53:55 smoggers

好thaks，作品fine.Can你给我解释一下为什么我们添加属性附加伤害显示：表，做什么的正是这种属性附加伤害？ @smoggers – ground

蹊跷HTML表格

回答

相关问题