Table Column Widths

Hi Experts,

I have a table in which I have defined the width for each column by using a class or ID within its th elements. However, in the actual body the tds do not line-up, and are off different widths. Truthfully, the contents are much longer than the headings, but I expected them to be cut-off.

Thank you
APD TorontoSoftware DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
is the site containing the table public available? If not, can you post the styles and HTML code? Or at least make and attach a screenshot?
What do you mean with "cut-off"?
What do you mean with "do not line-up"?
Thanks for clarification
Rainer
0
Marco GasiFreelancerCommented:
Ca you show the css? Anyway, the tds don't inherit their style from the ths, so I think the simplest way is to set explicitely the width for the tds elements.
Don't unserstand if you want the content be cut-off or not: if so set overflow: hidden for tds.
0
rbudjCommented:
I concur with Marco. <td>'s will inherit from another <td> but not from a <th>. Place your width style also on the <td> and the rest should line up to that <td>

<tr>
   <td style="width:200px;">Hello</td>
   <td style="width:200px;">World</td>
</tr>
<tr>
   <td>Hello</td>
   <td>World</td>
</tr>
0
Pravin AsarPrincipal Systems EngineerCommented:
You can wrap the text.

Here is an example code

<html>
<head>
   <style>
   table {border-collapse:collapse; table-layout:fixed; width:310px;}
   table td {border:solid 1px #fab; width:100px; word-wrap:break-word;}
   </style>
</head>

<body>
   <table>
      <tr>
         <td>1</td>
         <td>Lorem Ipsum</td>
         <td>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </td>
      </tr>
      <tr>
         <td>2</td>
         <td>LoremIpsumhasbeentheindustry'sstandarddummytexteversincethe1500s,whenanunknown</td>
         <td>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</td>
      </tr>
      <tr>
         <td>3</td>
         <td></td>
         <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna...</td>
      </tr>
   </table>
</body>
</html>
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Steve BinkCommented:
In your example, Chrome renders a 3-row, 3-column table, with each cell having a width of 100px.  Can you post the *actual* example code, or the URL for it?

Also, if you are posting code, please use the "Code" feature of the editor, or attach it as a file.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.