• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 234
  • Last Modified:

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
0
APD Toronto
Asked:
APD Toronto
5 Solutions
 
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
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now