CODEWITHSUNDEEP
html
Tom
Tom

Reputation: 369

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

Upvotes: 0

Views: 297

Answers (4)

scarface
scarface

Reputation: 1

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>

Upvotes: 0

user549757
user549757

Reputation: 33952

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

Upvotes: 2

CodeVirtuoso
CodeVirtuoso

Reputation: 6448

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.

Upvotes: 0

Hogsmill
Hogsmill

Reputation: 1574

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.

Upvotes: 0

Related Questions