Выравнивание заголовков таблицы HTML

Question

Я пытаюсь разместить заголовки таблицы HTML, используя свойство width, и они полностью игнорируются.

Заголовок "Тип компании" разделен на две строки, а также тип занятости? У меня нет таблицы CSS в моем файле CSS. Какие свойства я могу использовать, чтобы выровнять каждый из заголовков по левому краю и следующий заголовок, чтобы начать WIDTH пикселей с начала предыдущего заголовка?

<thead style='float:left;'>
 <tr>
  <th style='width:270px;text-align:left;'>Company</th>       <th style='width:150px;text-align:left;'>Company Type</th>   <th style='width:80px;text-align:left;'>Employment Type</th>
        </tr>
</thead>

Answer 1

<thead style='text-align:left;'>
 <tr>
  <th style='width:270px;'>Company</th>
  <th style='width:150px;text-align:left;'>Company Type</th>
  <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>

Попробуйте это и убедитесь, что вы указали ширину для всех элементов заголовка, и общая ширина не превышает ширину таблицы.

Answer 2

Вы можете попробовать 'nowrap' - но это не поддерживается в HTML5

<th style='width:270px;text-align:left;'>Company</th>       
<th style='width:150px;text-align:left;' nowrap>Company Type</th>   
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>

Answer 3

У меня никогда не было надежной ширины th и td для работы; не на 100% уверен, что они предназначены.

Я обычно просто помещаю div внутри ячейки и задаю его ширину. Или добавьте отступы влево и вправо к th и td.

Answer 4

Без таблиц вы можете достичь этого следующим образом:

<div style="width:270px;float:left;">
Company
</div>

<div style="width:150px;float:left;">
Company Type
</div>

<div style="width:80px;float:left;">
Employment Type
</div>

Конечно, вы можете легко настроить его по своему вкусу, и я бы оставил стили в отдельном файле CSS.