nicht angemeldet
Hi,
.vorkomma { display: inline-block; text-align: right; width: 3em }
.nachkomma { display: inline-block; text-align: left; width: 1em }
> Okay. per CSS als Blockelement umformen.
> Dann bleibt es auf HTML-Ebene auch bestimmt ein inline-Element und sltellt keine Barriere dar?
> Stimmt das?
Sieht so aus.
Ein anderer Vorschlag ins Blaue reingedacht:
man könnte per Javascript die span-Elemente einfügen, so hat man zumindest beim Editieren nicht die Notwendigkeit, da tätig zu werden.
Beispiel:
~~~html
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8' />
<title>Tabelle: Kommazahlen komma-bündig ausrichten</title>
<script src="http://code.jquery.com/jquery-1.4.4.js" type="text/javascript"></script>
<style type="text/css">
td, th {
border: 1px solid black;
text-align:right;
}
.digit {
width: 0.6em;
display: inline-block;
text-align:left;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Spalte 1</th>
<th class='numeric'>Spalte 2</th>
<th class='numeric'>Spalte 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zeile 0</td>
<td>10,1</td>
<td>0,2</td>
</tr>
<tr>
<td>Zeile 1</td>
<td>0,12</td>
<td>0,2</td>
</tr>
<tr>
<td>Zeile 2</td>
<td>0,3</td>
<td>12,36</td>
</tr>
<tr>
<td>Zeile 3</td>
<td>0,45</td>
<td>8,45</td>
</tr>
<tr>
<td>Zeile 4</td>
<td>0,1</td>
<td>123,1</td>
</tr>
<tr>
<td>Zeile 5</td>
<td>12</td>
<td>0.2</td>
</tr>
</tbody>
</table>
</body>
<script type="text/javascript">
$(function() {
var after_dec_digits = 2;
// get all numeric columns
$('th.numeric').each(function() {
var columnIndex = this.cellIndex;
$(this).parent().parent().parent() // table-element
.find('td:nth-child(' + (columnIndex+1) + ')')
.each(function(rowIndex, node) {
var value = Number($(node).text().replace(/,/, '.')).toFixed(after_dec_digits);
var digits = value.split("");
var length = digits.length;
var new_text = '';
//alert("rowIndex=" + rowIndex + ", val=" + $(node).text() + ", l=" + digits.length);
for (var i = 0; i < length; ++i) {
if (i == length - after_dec_digits - 1) { // no 'digit' class for the decimal point
// for ',' instead of '.', exchange value here
new_text += digits[i];
} else {
new_text += '<span class="digit">' + digits[i] + '</span>';
}
}
$(node).html(new_text);
});
});
});
</script>
</html>
Hier trenne ich die Zahlen pro Ziffer. So kann ich auch mit nicht-dicktengleichen Schriftarten eine bündige Darstellung der Ziffern gewährleisten.
Bis die Tage,
Matti
Der Martin
Gunnar Bittersmann
MudGuard