请参阅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, "<span ></span>"); rightPart = fCols[j] + parts.pop(); tds[j].innerHTML = "<span >" + leftPart + "</span><span >" + rightPart + "</span>"; } else { tds[j].innerHTML = tds[j].innerHTML.replace(currencies, "<span ></span>"); tds[j].innerHTML = "<span >" + tds[j].innerHTML + "</span>"; } 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 pre ;) var styleText = "n" + "<style type='text/css'>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" + "</style>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;}<table id="only-css"> <thead> <tr> <th>Number</th> <th>Description</th> <th>Costs</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Lorem ipsum dolor sit amet</td> <td > <span > <span >$</span>3 </span> <span >,99</span> </td> </tr> <tr> <td>2</td> <td>Consectetuer adipiscing elit</td> <td > <span > <span >$</span>13 </span> <span >,95</span> </td> </tr> <tr> <td>3</td> <td>Pellentesque fringilla nisl ac mi</td> <td > <span > <span >$</span>4 </span> <span ></span> </td> </tr> <tr> <td>4</td> <td>Aenean egestas gravida magna</td> <td > <span > <span >$</span>123 </span> <span >,999</span> </td> </tr> </tbody></table>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)