2011-02-04 7 views
0

Существует ли стандартный метод вычисления значений фиксированной ширины для таблиц в HTML? Прямо сейчас, я работаю над форматированием таблиц на веб-странице с фиксированной шириной, у меня есть таблица, находящаяся в другой таблице, при тестировании страницы в IE. Я замечаю, что выравнивание двоеточия отключено, поскольку второе изображение ниже иллюстрирует. Мое намерение состоит в том, чтобы убедиться, что двоеточия правильно выровнены, как они есть в Firefox, и было просто любопытно, если несогласование было связано с настройками в HTML или если оно больше связано с тем, как браузер отображает страницу.Стандартная фиксированная ширина таблицы

Firefox: enter image description here

Internet Explorer:

enter image description here

UPDATE:

Извините за не предоставления какой-либо код ссылки, вот отрывок из конкретного раздела я работаю ,

<div style="width: 1600px; text-align: center; position: absolute; top: 10%; left: 0%;"> 
    <span id="labelInstructions" style="font-size: xx-large;">PAGE TITLE <br><br></span> 
    <table style="width: 1000px;" align="Center" border="0"> 
     <tbody> 
      <tr> 
       <td style="width: 1000px;"><label for="FileUpload1" style="font-size: x-large;">ENTER: </label><input name="FileUpload1" id="FileUpload1" size="70%" type="file"></td> 
      </tr> 
      <tr> 
       <td style="width: 1000px;"><span id="fileUploadError" style="color: Red; font-size: medium;"><br><br></span></td> 
      </tr> 
      <tr> 
       <td style="width: 1000px;"> 
       <table style="width: 1260px;" border="0"> 
        <tbody> 
         <tr> 
          <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE INSTRUCTIONS:</td> 
          <td style="font-size: x-large; width: 1800px;" align="left" valign="top">INSTRUCTION 1<br>INSTRUCTION 2<br></td> 
         </tr> 
         <tr> 
          <td></td> 
         </tr> 
         <tr> 
          <td style="font-size: x-large; width: 800px;" align="right" valign="top">FILE EXAMPLE:</td> 
          <td style="font-size: x-large; width: 1800px;" align="left" valign="top">EXAMPLE 1<br>EXAMPLE 2<br><br></td> 
         </tr> 
        </tbody> 
       </table> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div> 

Я знаю, что это некрасиво, просто обратите внимание, это ASP.Net генерируется веб-страницы и я устанавливаю атрибуты HTML элементов про грамматически из кода позади. Я унаследовал это, и мой работодатель хочет свести основные изменения до минимума.

UPDATE 2:

Когда я регулирую внутреннюю ширину таблицы я могу получить его, чтобы выровнять в IE при установке на 1377px. Для Firefox сладкое пятно для выравнивания составляет 1260 пикселей.

+0

Я бы сделать это только с вложенными таблицами, как последнее средство. В любом случае, некоторые html и/или css будут полезны или, по крайней мере, некоторые границы, чтобы иметь возможность правильно видеть макет. Я предполагаю, что вам нужно сделать TDs фиксированной ширины и разрешить обертывание, но, возможно, у вас уже есть это? – AJJ

ответ

0

Все, что вам нужно сделать, это сделать столбцы таблицы одинаковыми по ширине друг другу.

Пример стиля:

table tr td:first-child { background-color:yellow; width:200px; } 

HTML:

<table> 
    <tr><td>Row 1 Cell 1</td><td>Row 1 Cell 2</td></tr> 
    <tr><td>Row 2 Cell 1</td><td>Row 2 Cell 2</td></tr> 
    <tr><td>Row 3 Cell 1</td><td>Row 3 Cell 2</td></tr> 
</table> 
0

Извините за не прямо отвечать на ваш вопрос, но ...

Stoneage закончилась! Вы действительно не должны использовать Таблицы для целей макетирования, так как они вряд ли доступны для людей с ограниченными возможностями и делают ваш HTML-файл слишком большим (по отношению к контенту).

Отдельное содержание и макет, используйте CSS.

+2

Это идеологический вопрос, и это не помогает ему сказать: «Подумайте обо всем, что вы сделали до сих пор». – aorcsik

+0

Да, мне очень жаль, что я не ответил прямо на его вопрос, но я просто не могу стоять на столе. Извини друг. :) – anroesti

+0

Во-первых, это лучше подходит как комментарий, а не ответ на вопрос. Во-вторых, хотя вы правы, что использование табличных макетов «устарело», вы не можете просто предположить, что он имеет право выбирать ... может быть, он поддерживает веб-сайт клиентов, и они не хотят платить за редизайн? Возможно, он использует этот код для создания макета для табличных данных (сценарий, где использование таблиц более совместимо, чем использование div). Вы получаете идею ... – Moses

0

Убедитесь в том, чтобы поместить те части, которые вы хотите выровнять вместе в одной таблице.

<table id="layout"> 
    <tr><td>HEADER</td> 
    <tr><td> 
     <table id="form"> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
      <tr><td>LABEL</td><td>INPUT FIELD</td></tr> 
     </table> 
    </tr> 
    <tr><td>FOOTER</td> 
</table> 
0

я бы создать два класса, left и right и применить левый класс к <td> на левом и правом класса к <td> справа. левый класс был бы что-то вроде

.left{width:100px; text-align:right;} 

heres an example

Смежные вопросы