在html表中出错了

时间：2017-02-11 19:30:12

标签： html

我创建了与gmail类似的注册表单，但我无法更改td标签的大小 用户选择他的生日的表格行。可能是因为我将节日td设置为colspan=2。如何修复这行代码以便在视觉上看起来很好？

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：1)

如何为每个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>

相关问题
最新问题