CODEWITHSUNDEEP
htmlcssalignmentcss-tables
Karem
Karem

Reputation: 18123

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

Upvotes: 1

Views: 1883

Answers (6)

tjk
tjk

Reputation: 194

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.

Upvotes: 0

Andy E
Andy E

Reputation: 344763

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/

Upvotes: 1

Phrogz
Phrogz

Reputation: 303490

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.

Upvotes: 0

rfgamaral
rfgamaral

Reputation: 16842

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.

Upvotes: 0

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114417

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

Upvotes: 1

Dutchie432
Dutchie432

Reputation: 29170

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>

Upvotes: 0

Related Questions