Выравнивание содержимого в таблице HTML - PullRequest
Новая
       47

Выравнивание содержимого в таблице HTML

1 голос
/ 17 июня 2011

Я только начинаю изучать HTML и ASP.NET. У меня проблема с выравниванием содержимого в таблице.

Вот мой код: 

    .cartonTb
    {
        font-size:x-large;
        text-align:right;
    }
    .cartonlnkBtn
    {
        text-align:left;
        font-size:x-large;
    }

   <table >
      <tr>
        <td>
          <table width="800">
               <tr>
                 <td >
                   <asp:Label runat="server"  Text="MODEL NO" class="cartonlnkBtn"  />
                 </td>
                 <td >
                  <asp:TextBox ID="tbCartonModel" runat="server" class="cartonTb" style="width:200px" />
                 </td>
                  <td >
                  <asp:Label   runat="server"  Text="MODEL VERSION" class="cartonlnkBtn"  />
                  </td>
                  <td >
                  <asp:TextBox ID="tbCartonModelVer" runat="server" class="cartonTb" 
                                        style="width:100px"/>
                  </td>
                  </tr>
                  </table>

                   </td>
                     </tr>
                      <tr>
                       <td>
                          <table width="800">
                            <tr>
                                <td >
                                    <asp:Label  runat="server"  Text="PART NO" class="cartonlnkBtn" />
                                </td>
                                <td >
                                   <asp:TextBox ID="tbCartonPartNp" runat="server" class="cartonTb" style="width:200px" />
                                </td>
                               <td > 
                                    <asp:Label  runat="server"  Text="QUANTITY" class="cartonlnkBtn" />
                                </td>
                                <td>
                                  <asp:TextBox ID="tbCartonQty"  runat="server" class="cartonTb" style="width:100px" />
                                </td>

                            </tr>
                        </table>

                        </td>
                    </tr>
                </table>

Вывод в браузере выглядит так: enter image description here

Мне бы хотелось иметь одинаковую стартовую позицию для ярлыков и текстовых полей.

Я бы хотел получить такой вид: enter image description here

Ответы [ 3 ]

0 голосов
/ 17 июня 2011

В дополнение к предложению @ Jordan вам понадобится text-align:left для .cartonTb

0 голосов
/ 17 июня 2011

Из любопытства, есть ли причина, по которой вы решили использовать вложенные таблицы в строках вашей самой внешней таблицы? Если бы вместо этого вы использовали следующую структуру и поместили свои элементы ASP в теги <td> внешней таблицы (а не создавали новые таблицы), столбцы автоматически выбирали бы размер, чтобы соответствовать наибольшему элементу из любой строки , производя желаемые результаты. 

.cartonTb
    {
        font-size:x-large;
        text-align:right;
    }
    .cartonlnkBtn
    {
        text-align:left;
        font-size:x-large;
    }

   <table >
      <tr>
        <td>
            <asp:Label runat="server"  Text="MODEL NO" class="cartonlnkBtn"  />
        </td>
        <td >
            <asp:TextBox ID="tbCartonModel" runat="server" class="cartonTb" style="width:200px" />
        </td>
        <td >
            <asp:Label   runat="server"  Text="MODEL VERSION" class="cartonlnkBtn"  />
        </td>
        <td >
            <asp:TextBox ID="tbCartonModelVer" runat="server" class="cartonTb" 
                                        style="width:100px"/>
        </td>
      </tr>
      <tr>
        <td>
            <asp:Label  runat="server"  Text="PART NO" class="cartonlnkBtn" />
        </td>
        <td >
            <asp:TextBox ID="tbCartonPartNp" runat="server" class="cartonTb" style="width:200px" />
        </td>
        <td > 
            <asp:Label  runat="server"  Text="QUANTITY" class="cartonlnkBtn" />
        </td>
        <td>
            <asp:TextBox ID="tbCartonQty"  runat="server" class="cartonTb" style="width:100px" />
        </td>
      </tr>
 </table>

Я никогда раньше не использовал ASP, и поэтому я не знаю, существуют ли какие-либо соглашения ASP, которые могут повлиять на эту структуру.

И, как предположил Дон, вы захотите изменить text-align на .cartonTb

0 голосов
/ 17 июня 2011

Сделайте ширину тд согласованной, и содержимое должно выстроиться лучше. В основном, сделайте каждый

<td width="25%"> или <td width="200px">

...