HTML/CSS: Table text align

I have this: http://jsfiddle.net/bDTRz/

I wish to make it all look the same no matter the content (I think I need widt开发者_开发百科h, 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.

---

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/

---

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

---

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>

---

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.

---

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.

---

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.