HTML/CSS: Tableau texte s'aligner

Question

J'ai ceci: http://jsfiddle.net/bDTRz/

Je souhaite faire tout la même apparence, peu importe le contenu (je pense que je dois largeur, mais je ne sais pas où). J'ai fait de la largeur: 100% sur toutes les tables. Parce que si vous voyez "Idag", vous verrez comment le texte est différent de "vieux". C'est parce que le td dans les colonnes de "vieux" est plus long (date + heure) que le td dans "idag" (temps seulement).

Comment puis-je résoudre ce problème? Je sais que je dois utiliser la largeur sur la td's, j'ai essayé, mais je ne l'ai pas réussi à les faire tous alignés les uns aux autres

j'arrivé jusqu'ici maintenant: http://jsfiddle.net/79jH6/

Mais encore ne s'aligne pas comme je le veux.

Answer 1

Le vrai problème ici est un manque de compréhension de la façon dont les largeurs de colonnes sont calculées. Je souffre du même manque de compréhension — width sur les cellules de tableau est souvent une tâche délicate et je n'utilise pas souvent les tables à cause de cela. J'ai réussi à résoudre votre problème particulier en définissant un élément <colgroup> avec 3 <col> enfants, chacun avec un nom de classe:

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

Et le CSS suivant:

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

démonstration de travail: http://jsfiddle.net/QrUj9/1/

Answer 2

dans votre css, sous la classe cell, ajoutez

.cell{ 
    width:150px; 
} 

Note: Cela entraînera toutes vos cellules (<td> « s) avec le nom de classe "cellule" pour avoir une largeur de 150 pixels.

Vous pouvez spécifier la largeur de chaque cellule de droite dans le code 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> 

Answer 3

Donnez vos TDs noms de classe et d'utiliser votre feuille de style pour attribuer des largeurs. De cette façon, vous avez seulement besoin de changer les choses en un seul endroit.

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

.col1 { 
    width:50px; 
} 

.col2 { 
    width:60px; 
} 

Answer 4

Vous pouvez le faire comme ceci:

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

Cela rendra la largeur égale pour la seule cellule première.

Answer 5

Au lieu de séparer votre contenu en plusieurs tables, pourriez-vous faire à la place ceci:

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

Je ne suis pas sûr si elle est sémantiquement mieux ou pire que ce que vous avez parce que je ne peux pas lire la langue (Suédois?), Mais cela assurerait que votre contenu soit aligné sans largeur fixe.

Answer 6

Je pense que je comprends ce que vous êtes après - des largeurs de colonnes cohérentes?

Vous devez affecter une classe spécifique à chaque cellule de table (balise td) et spécifier la largeur de celle-ci dans votre CSS.

Exemple ligne de table:

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

Dans le code ci-dessus, j'ai mis la classe pour votre cellule de date à « date », la classe de cellules chaîne de texte « desc », et vous avez déjà " removeAction "pour la cellule DEL.

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

De toute évidence, régler la largeur en fonction de votre mise en page.