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

回答

相關問題