HTML table headers alignment

I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.

The 'Company Type' header is being split over two lines and so too is the Employment typ开发者_高级运维e? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?

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

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

Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.

I've never reliably got th and td width to work; not 100% sure they're meant to.

I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.

In a tableless way you could achieve that by this:

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

Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.

You could try 'nowrap' - but it isnt supported in 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>