在HTML中对齐小数点

Question

我有一张表格，其中一列包含十进制数字。我希望以类似于文字处理器的“十进制制表符”功能的方式对齐它们，以便所有点都位于一条垂直线上。

我目前有两种可能的解决方案，但我希望有更好的解决方案…

解决方案1：在HTML中拆分数字，例如

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

与

.dp { width: 3em; }

（是的，此解决方案不能完全按原样工作。但是，此概念是有效的。）

解决方案2：我发现提到

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

根据参考页，这是HTML4的一部分，但是在我必须使用的浏览器FF3.5，Safari
4或IE7中却无法使用。它还存在无法将数字格式提取到CSS的问题（尽管由于它影响到整个列，所以我认为这并不奇怪）。

因此，有谁有更好的主意？

Answer 1

请参阅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 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]) {

              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" +

      "<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 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>