HTML/CSS: Table text align

Question

I wish to make it all look the same no matter the content (I think I need width, but I do not know where). I did width: 100% on all the tables.

Because if you see "Idag" you'll see how the text is different from "old". This is because the td in the columns in "old" is longer(date+time) than the td in "idag" (time only).

How can I solve this? I know I need to use width on the td´s, I tried, but still I didn't manage to make them all align with each other

I gotten this far now: http://jsfiddle.net/79jH6/

But still it does not align like how I want.

Why close? I provided jsfiddle, what I tried, the issue, how I wanted it to be? — Karem
– Karem, Commented Dec 7, 2010 at 21:42

Andy E · Accepted Answer · 2010-12-08 15:26:10Z

1

The real issue here is a lack of understanding of how column widths are calculated. I suffer from the same lack of understanding — setting width on table cells is often an awkward task and I don't use tables often because of it. I managed to fix your particular issue by defining a <colgroup> element with 3 <col> children, each with a class name:

<colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
</colgroup>

And the following CSS:

.col1 { width: 70px; }
.col2 { width: auto; }
.col3 { width: 30px; }

Working demo: http://jsfiddle.net/QrUj9/1/

answered Dec 8, 2010 at 15:26

Andy E

346k86 gold badges482 silver badges452 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Diodeus - James MacFarlane · Accepted Answer · 2010-12-07 21:42:34Z

1

Give your TDs class names and use your stylesheet to assign widths. This way you only need to change things in one place.

<td class='col1'>...</td><td class='col2'>...</td>

.col1 {
  width:50px;
}

.col2 {
  width:60px;
}

answered Dec 7, 2010 at 21:42

Diodeus - James MacFarlane

115k33 gold badges164 silver badges180 bronze badges

1 Comment

Karem Over a year ago

I tried this, but it still acts the same, the tables arent the same. Please see new: jsfiddle.net/79jH6

Dutchie432 · Accepted Answer · 2010-12-07 21:42:18Z

0

in your css, under the cell class, add

.cell{
    width:150px;
}

Note: This will cause all of your cells (<td>'s) with the class name "cell" to have a width of 150 pixels.

Alternatively, you can specify the width for each cell right in the HTML

<table>
<tr>
<td class="cell" width="150">...</td>
<td class="cell" width="100">...</td>
<td class="cell" width="75">...</td>
<td class="cell" width="50">...</td>
</tr>
</table>

answered Dec 7, 2010 at 21:42

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

2 Comments

Phrogz Over a year ago

I would not recommend the use of deprecated presentational attributes.

Dutchie432 Over a year ago

Just providing options. I do think CSS is the way to go.

rfgamaral · Accepted Answer · 2010-12-07 21:43:33Z

0

You could do it like this:

table tr td.cell:first-child {
    width: 150px;
}

This will make the width equal for the first cell only.

answered Dec 7, 2010 at 21:43

rfgamaral

16.9k59 gold badges180 silver badges279 bronze badges

Comments

Phrogz · Accepted Answer · 2010-12-07 21:48:50Z

0

Instead of separating your content into multiple tables, could you instead do this:

<table><tbody>
  <tr><th colspan="3">Idag (1) - ta bort alla</th></tr>
  <tr><td>21 minuter sedan</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Igår (1) ta bort alla </th></tr>
  <tr><td>kl. 22:17</td>...</tr>
</tbody><tbody>
  <tr><th colspan="3">Old (33) ta bort alla</th></tr>
  ...
</tbody></table>

I'm not sure if it's semantically better or worse than what you have because I can't read the language (Swedish?), but it would ensure your content lined up with no fixed-widths needed.

answered Dec 7, 2010 at 21:48

Phrogz

304k115 gold badges669 silver badges758 bronze badges

Comments

tjk · Accepted Answer · 2010-12-08 20:20:26Z

0

I think I understand what you are after - consistent column widths?

You need to assign a specific class to each table cell (td tag), and specify the width for that in your CSS.

Example table row:

<tr>
<td class="date">21 minuter sedan</td>
<td class="desc">
<a href="profil.php?id=1&amp;wE=2165"><strong>Meg Meg</strong> har skrivit på din vägg.</a></td>
<td>
<a id="1231" data-id="T" class="removeAction">DEL</a>
</td>
</tr>

In the above code, I have set the class for your date cell to "date", the text string cell class to "desc", and you already have the "removeAction" class for the DEL cell.

Example CSS:

#todayNotes{ 
    width: 100%;
}

#yesterdayNotes{
    width: 100%;
}

#olderNotes{
    width: 100%;
}

.cellDate{
    width:150px;
    border: 1px solid #000;
}

.cellNote{
    border: 1px solid red;
}

.cellDel{
    width: 10px;
    border: 1px solid green;
}

Obviously, adjust the widths to suit your layout.

edited Dec 8, 2010 at 20:20

answered Dec 7, 2010 at 21:54

tjk

1945 bronze badges

2 Comments

Karem Over a year ago

I tried this, please see jsfiddle.net/79jH6 , they still are not the same. Help

tjk Over a year ago

@Karem I have edited the CSS above (edited widths and removed cellNote width) - the cellDate and cellDel widths should be consistent now, and the cellNote column should stretch to fit its content because the table width is 100%.

Collectives™ on Stack Overflow

HTML/CSS: Table text align

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

Comments

1 Comment

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related