J'utilise fréquemment des tableaux contenant des chiffres qui doivent être alignés à droite afin que les chiffres de ceux-ci / dizaines / centaines / milliers de centaines soient alignés. Comme ceci:
Column 1 Column 2
===========================|===========================
2,343 | 32
43 | 44,432
12,243,394 | 23
232,111 | 4,432
5 Réponses :
L'astuce évidente serait d'utiliser des cellules de table supplémentaires. I.e. où le . indique des bordures de table invisibles avec largeur automatique.
Pour aligner correctement l'en-tête, l'attribut
Mon objectif est d'être facile et de rester sémantique, donc je ne voudrais donc pas avoir à ajouter une tonne de cellules personnalisées "manuellement". Ces tables sont éditées par des non-programmeurs à TinyMCE.
Les chiffres ne proviennent donc pas d'une source de données backend comme une base de données ou quelque chose? Vous n'avez que le PURE HTML et ne le générez pas?
Difficile à faire sans éléments supplémentaires et pour la largeur dynamique. Vous pouvez définir un rembourrage gauche et droit pour les balises td et que JavaScript le diminue automatiquement lorsqu'une barre de défilement horizontale est visible. Emballage du texte dans un
bel essai, mais mauvaise idée, j'ai 7 cellules de données qui doivent être centralisées directement alignées avec 1400 lignes, ce qui entraînerait 3 fois le nombre de cellules vides, le rendu de la page va être fâché grand temps, n'est pas une solution de contournement pour cela Je vais offrir une réponse différente de modifier le balisage pour répondre à vos besoins: Utilisez la largeur de JQuery () et itérale à travers les en-têtes de colonne, vérifiant / stockant leurs largeurs. Puis ajoutez une classe prédéfinie (avec un rembourrage) ou modifier le rembourrage TD de chaque cellule dans la colonne. P> quelque chose sur les lignes de ceci: p>
Cela ne correspond pas à une largeur de texte différente dans différentes cellules. Le rembourrage droit doit varier par colonne en fonction du texte le plus large. En d'autres termes, le rembourrage droit doit être Pour une colonne numérique, vous souhaitez aligner "Centré Droite", utilisez trois colonnes, où la colonne gauche et droite est réglée sur 50%. Les chiffres sont placés dans la colonne du milieu. Comme aucune largeur n'est définie pour cette colonne, elle obtient la plus petite largeur possible, qui est la largeur du nombre le plus large. Cette largeur est prise à partir de la colonne de gauche et de droite en parties égales. html: Ça fonctionne bien tant que tous les numéros d'une colonne ont le même nombre de décimales. Si nécessaire, vous pouvez utiliser la colonne de gauche pour aligner les panneaux et la colonne de droite pour afficher les notes de bas de page (alignées à gauche) sans déranger l'alignement. Pour plus d'une colonne Numéro Utilisez la règle suivante, où n est le Nombre de colonnes numériques et X_I est la moitié de la largeur souhaitée de la colonne I-Th Number et Sum (x_i) = 100:
C'est très intelligent, je dois essayer d'essayer. D'accord, j'ai traversé certaines des réponses et j'ai du mal à accepter l'idée d'ajouter des colonnes supplémentaires qui ne servent absolument aucun but. Je vais suggérer une meilleure méthode qui implique d'ajouter des espaces non rompus au début de chaque caractère et du centre alignant tout sans ajouter de colonnes supplémentaires.
Utilisez la fonction ci-dessous sur les chaînes de coussints avec une séquence de caractères supplémentaire au début
La grave limitation de cette approche est que les polices doivent être espacées mono, quiconque connaît une meilleure solution Vous pouvez envelopper le texte p> colspan = "3" doit être défini sur le (cellules d'en-tête de table).
span avec un min-largeur: 10em; Alignement du texte: Droit vient à mon esprit, mais ne fonctionnera probablement pas avec TinyMCE non plus.
1
votes
jQuery("thead td").each(function(columnIndex)
{
var width=jQuery(this).width();
jQuery(":not(thead) > tr").each(function()
{
jQuery(this).find("td").eq(columnIndex).css("padding-right",width/2);
});
});
1 commentaires
(colonnewidth - widesttext) / 2
3
votes
1 commentaires
0
votes
function padString(pad, str, leftPadded) {
if (str === undefined) return pad;
if (leftPadded) {
return (pad + str).slice(-pad.length);
} else {
return (str + pad).substring(0, pad.length);
}
}
var coin, newRow, newCell, value, newText
var spaces = new Array(4).fill('\u00A0').join('')
for(let i = 0; i < 1400; i++){
// Insert a row in the table at row index 0
newRow = tbody.insertRow(i);
// Insert a cell in the row at index 0
newCell = newRow.insertCell(0);
newCell.className = 'rank'
value = padString(spaces,''+ (i + 1) ,true)
// Append a text node to the cell
newText = document.createTextNode(value);
newCell.appendChild(newText);
}
1 commentaires
0
votes
td code> strud> dans un strong> code> strong> puis trouve la math.max.apply (null, tableau) code> strong> et appliquez des règles CSS dans la plage comme ci-dessous
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:100%">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
<td>2,343</td>
<td>32</td>
</tr>
<tr>
<td>43</td>
<td>44,432</td>
</tr>
<tr>
<td>12,243,394</td>
<td>23</td>
</tr>
<tr>
<td>232,111</td>
<td>4,432</td>
</tr>
</table>
0 commentaires