html里小数点代码,在HTML中对齐小数点

参见

this article by Krijn Hoetmer您的选项和如何实现这一点。这个解决方案的本质是使用CSS和JS来实现这一点：

(function() {

var currencies = /(\$|€|€)/;

var leftWidth = 0, rightWidth = 0;

for(var tableCounter = 0, tables = document.getElementsByTagName("table");

tableCounter < tables.length; tableCounter++) {

if(tables[tableCounter].className.indexOf("fix-align-char") != -1) {

var fCols = [], leftPart, rightPart, parts;

for(var i = 0, cols = tables[tableCounter].getElementsByTagName("col"); i < cols.length; i++) {

if(cols[i].getAttribute("char")) {

fCols[i] = cols[i].getAttribute("char");

}

}

for(var i = 0, trs = tables[tableCounter].rows; i < trs.length; i++) {

for(var j = 0, tds = trs[i].getElementsByTagName("td"); j < tds.length; j++) {

if(fCols[j]) {

if(tds[j].innerHTML.indexOf(fCols[j]) != -1) {

parts = tds[j].innerHTML.split(fCols[j]);

leftPart = parts.slice(0, parts.length -1).join(fCols[j]);

leftPart = leftPart.replace(currencies, "$1");

rightPart = fCols[j] + parts.pop();

tds[j].innerHTML = "" + leftPart + "" + rightPart + "";

} else {

tds[j].innerHTML = tds[j].innerHTML.replace(currencies, "$1");

tds[j].innerHTML = "" + tds[j].innerHTML + "";

}

tds[j].className = "char-align";

var txt = document.createTextNode(tds[j].firstChild.offsetWidth);

if(leftWidth < tds[j].firstChild.offsetWidth) {

leftWidth = tds[j].firstChild.offsetWidth;

}

if(tds[j].childNodes[1]) {

txt = document.createTextNode(tds[j].childNodes[1].offsetWidth);

if(rightWidth < tds[j].childNodes[1].offsetWidth) {

rightWidth = tds[j].childNodes[1].offsetWidth;

}

}

}

}

}

}

}

// This is ugly and should be improved (amongst other parts of the code ;)

var styleText = "\n" +

"

" .fix-align-char td.char-align { width: " + (leftWidth + rightWidth) + "px; }\n" +

" .fix-align-char span.left { float: left; text-align: right; width: " + leftWidth + "px; }\n" +

" .fix-align-char span.currency { text-align: left; float: left; }\n" +

" .fix-align-char span.right { float: right; text-align: left; width: " + rightWidth + "px; }\n" +

"\n";

document.body.innerHTML += styleText;

})();

table {

border-collapse: collapse;

width: 600px;

}

th {

padding: .5em;

background: #eee;

text-align: left;

}

td {

padding: .5em;

}

#only-css td.char-align {

width: 7em;

}

#only-css span.left {

float: left;

width: 4em;

text-align: right;

}

#only-css span.currency {

float: left;

width: 2em;

text-align: left;

}

#only-css span.right {

float: right;

width: 3em;

text-align: left;

}

NumberDescriptionCosts

1Lorem ipsum dolor sit amet

$3

,99

2Consectetuer adipiscing elit

$13

,95

3Pellentesque fringilla nisl ac mi

$4

4Aenean egestas gravida magna

$123

,999