Bir tablonun bir sütunundaki ondalık sayıları içeren var. Bir şekilde işlemci sekmesi tüm noktaları dikey bir çizgi üzerinde oturur, böylece "özelliği." ondalık bir kelime benzer hizalamak için arıyorum

Şu an iki Olası çözümler var ama daha iyi bir şey için umut ediyorum...

Çözüm 1: HTML içinde sayılar, örneğin Bölünmüş

<td><div>1234</div><div class='dp'>.5</div></td>

ile

.dp { width: 3em; }

(Evet, bu çözüm oldukça olduğu gibi işe yaramıyor. Kavram, ancak, geçerlidir.)

Çözüm 2: söz buldum

<col align="char" char=".">

Bu başvuru sayfasına göre HTML4 bir parçası, ama FF3 olmuyor.5, Safari 4 veya el var tarayıcısı olan IE 7,. Ayrıca CSS biçimlendirme sayısal (sütun etkiliyor beri, sanırım ancak bu o kadar şaşırtıcı değil) çıkaramazsın sorun vardır.

Kimsenin daha iyi bir fikri vardır?

this article by Krijn Hoetmer bunu başarmak için nasıl seçenekler ve bakın. Bu çözüm özünü CSS ve JS bunu başarmak için kullanılacak

<style type="text/css">
  table { border-collapse: collapse; width: 600px; }
  th { text-align: left; background: #eee; padding: 0 2em 0 0; }
  td { padding: 0 2em 0 0; }
  #only-css td.char-align { width: 7em; }
  #only-css span.left { float: left; text-align: right; width: 4em; }
  #only-css span.currency { float: left; text-align: left; width: 2em; }
  #only-css span.right { float: right; width: 3em; text-align: left; }
</style>

<script type="text/javascript">
       if (document.getElementsByTagName) {
        window.onload = function() {
         var currencies = /(\$|€|€)/;
         var leftWidth = 0, rightWidth = 0, currencyWidth;
         for (var tableCounter = 0, tables = document.getElementsByTagName('table'); tableCounter < tables.length; tableCounter  ) {
          if (tables[tableCounter].className.indexOf('fix-align-char') != -1) {
           var fCols = [];
           for (var i = 0, cols = tables[tableCounter].getElementsByTagName('col'); i < cols.length; i  ) {
            if (cols[i].getAttribute('char')) {
             fCols[i] = cols[i].getAttribute('char');
            };
           };
           var leftPart, rightPart, parts;
           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 class="currency">$1</span>');
               rightPart = fCols[j]   parts.pop();
               tds[j].innerHTML = '<span class="left">'   leftPart   '</span><span class="right">'   rightPart   '</span>';
              } else {
               tds[j].innerHTML = tds[j].innerHTML.replace(currencies, '<span class="currency">$1</span>');
               tds[j].innerHTML = '<span class="left">'   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]) {
               var 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 = '<style type="text/css">.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; }</style>';
         document.body.innerHTML  = styleText;
        };
       };
</script>

<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 class="char-align"><span class="left"><span class="currency">$</span>3</span><span class="right">,99</span></td>
    </tr>
    <tr>
     <td>2</td>
     <td>Consectetuer adipiscing elit</td>
     <td class="char-align"><span class="left"><span class="currency">$</span>13</span><span class="right">,95</span></td>
    </tr>
    <tr>
     <td>3</td>
     <td>Pellentesque fringilla nisl ac mi</td>
     <td class="char-align"><span class="left"><span class="currency">$</span>4</span><span class="right"></span></td>
    </tr>
    <tr>
     <td>4</td>
     <td>Aenean egestas gravida magna</td>
     <td class="char-align"><span class="left"><span class="currency">$</span>123</span><span class="right">,999</span></td>
    </tr>
   </tbody>
  </table>