Căn chỉnh dữ liệu thập phân trong cột bảng theo dấu thập phân, HTML5, CSS3

Question

Tôi đang tạo một plugin wordpress đang tạo bảng HTML và gửi tới khối html gravityforms qua shortcode.

Vấn đề của tôi là nội dung di động có thể bao gồm:

• 23,24
• 1,234.665
• 123,4

vv ...

Thông báo số khác nhau của chữ số thập phân.

Có không hack & thực hành tốt nhất cách căn chỉnh dữ liệu cột này theo dấu thập phân? Trong trường hợp này, Căn chỉnh đúng sẽ không hoạt động.

Chèn số 0 không được chấp nhận vì điều này cho biết mức độ chính xác không có ở đó.

Như bạn có thể thấy, tôi đã cố gắng sử dụng align="char" char="." bên trong các phần tử td không có may mắn.

Bất kỳ trợ giúp nào mà bất kỳ ai có thể trợ giúp với điều này đều sẽ được đánh giá cao.

Rất cám ơn.

Có cách nào để sử dụng printf("%8.3f",d1) hoặc tương tự mà không thực sự in trên màn hình không? ví dụ. cấu trúc biến d1 để sử dụng sau này nhưng không thực sự in nó?

Answer 1

Vấn đề là bạn phải đảm bảo rằng tất cả chúng đều có cùng số chữ số sau dấu thập phân.

Khi bạn làm điều đó, hãy sử dụng text-align. Tất cả điều đó sẽ là: style='text-align: right'

Vẫn còn tốt hơn, bạn có thể sử dụng lớp css thay vì kiểu nội tuyến. đánh dấu của bạn sẽ trông như thế này:

<tr><td>Item 1</td><td>15</td><td class='price'>&pound;123.25</td></tr> 

Sau đó, trong stylesheet của bạn:

td.price{ 
    text-align: right; 
} 

Với php, bạn có thể định dạng một số như là một chuỗi với number_format. Bạn không cần phải lặp lại nó hoặc in nó, chỉ cần bọc biến của bạn trong hàm đó. Ví dụ:

$table .= "<td class='price'>&pound;" . $price . "</td></tr>"; 

trở thành:

$table .= "<td class='price'>&pound;" . number_format($price,3) . "</td></tr>"; 

Answer 2

Nó sẽ được chấp nhận để đưa giá trị vào hai cột?

Sử dụng sprintf() để chuyển giá trị thành chuỗi và sau đó đặt các bit lên đến dấu thập phân trong cột bên trái (nhưng căn phải) và vị trí thập phân trong cột thứ hai.

Xem http://jsfiddle.net/alnitak/p4BhB/, nhưng bỏ qua bit JS ...

Answer 3

Không có cách nào trực tiếp để thực hiện việc này. HTML 4.01 có align=char nhưng không hỗ trợ trình duyệt. CSS 2.0 có một đối tác, sử dụng thuộc tính text-align, với sự thiếu hỗ trợ như nhau, do đó, nó đã bị loại bỏ khỏi CSS 2.1. Các bản nháp CSS3 có một hệ thống tốt đẹp cho sự liên kết như vậy, nhưng được chỉ ra là có nguy cơ bị cắt khỏi spec nếu không có (đúng) việc triển khai.

Như một giải pháp thay thế, bạn có thể đệm đúng các giá trị bằng thứ gì đó ẩn (trống) sao cho khi các giá trị được căn chỉnh về bên phải, các dấu thập phân được căn chỉnh. Có một số cách để cố gắng đạt được điều này:

1) Sử dụng chữ số 0 nhưng đặt kiểu trên đó, làm cho kiểu ẩn, ví dụ:

123.4<span class=s>00</span> 

với

.s { visibility: hidden; } 

2) Sử dụng Hình SPACE U + 2007, được xác định có chiều rộng tương tự như chữ số (khi chữ số là chiều rộng tương đương), ví dụ

123.4   

Để làm việc này, bạn cần đặt phông chữ để chứa U + 2007. Theo http://www.fileformat.info/info/unicode/char/2007/fontsupport.htm thậm chí Arial có chứa nó, nhưng tôi e rằng điều này có thể không áp dụng cho các phiên bản cũ của Arial vẫn đang được sử dụng.

3) Sử dụng không gian trống và đặt chiều rộng thành số chữ số mong muốn, sử dụng đơn vị ch (xác định có chiều rộng chữ số 0), mặc dù đơn vị này tương đối mới và không được trình duyệt cũ hỗ trợ . Ví dụ:

123.4<span class=d2>&nbsp;</span> 

với

.d2 { width: 2ch; display: inline-block; } 

tôi có lẽ sẽ sử dụng phương pháp đầu tiên. Như một vấn đề về nguyên tắc, nó có nhược điểm là khi CSS bị tắt, dữ liệu chứa số không, ngụ ý thông tin sai về độ chính xác, trong khi trong các phương pháp khác, việc tắt CSS “chỉ” sẽ làm rối loạn bố cục.

(Có thể rõ ràng là các chữ số phải có chiều rộng trước bằng nhau, để bạn có thể căn chỉnh dữ liệu số. Điều này có nghĩa là phông chữ được sử dụng cho các giá trị phải có thuộc tính đó. nhưng ví dụ: Georgia, Constantia và Corbel sẽ không.)

Answer 4

Tôi đã viết một plugin jQuery để giải quyết vấn đề này. Nó được tìm thấy ở đây: https://github.com/ndp/align-column

Sử dụng bảng HTML liệu của bạn, nó sẽ sắp xếp một cột bằng cách điểm số thập phân:

$('table').alignColumn(3);

Nó làm điều này bằng cách thêm một cột nữa, nhưng làm hết sức mình để không tham nhũng khác khoảng cách. Ngoài ra còn có một tham chiếu đến một giải pháp khác trên trang Github.

Answer 5

Nó có thể là quá mức cần thiết nhưng tôi cần điều tương tự và chỉ được giải quyết với độ dài đầu ra và thêm khoảng trống dựa trên độ dài đó.

I.e.:

if (strlen($meal_retail) == 5) { 
echo "    "; 
} 
else (strlen($meal_retail) == 6) { 
    echo "  "; 
} 

Điều này xếp hàng số thập phân của tôi một cách chính xác với một chút làm thêm, và tôi chắc chắn một mảng có thể làm sạch mã trên thậm chí còn đẹp hơn.

Thêm vào đó, tôi đã được phù hợp với số của tôi điều chỉnh với:

echo money_format('%i',$meal_retail) (makes it a two decimal money number) 

Chỉ muốn cung cấp giải pháp của tôi như là tôi đang tìm kiếm tại trang này trước khi đến với độ phân giải của riêng tôi.

Answer 6

đây là giải pháp của tôi, hy vọng nó giúp đỡ !!

<style type="text/css"> 
td{ 
    font-family: arial; 
} 
.f{ 
    width: 10px; 
    color: white; 
    -moz-user-select: none; 
} 
</style> 

<table> 
<tr><td><span class="f">00</span>1.1<span class="f">00</span></td></tr> 
<tr><td><span class="f">0</span>12.34<span class="f">0</span></td></tr> 
<tr><td>123.456</td></tr> 
</table> 

với điều này, bạn không thể thấy số 0 và không thể chọn chúng!

Answer 7

Tôi đã sử dụng javascript cho điều này, tôi hy vọng điều này sẽ giúp .......

</tr> 
</table> 

</body> 
for(var i=0; i<numarray.length; i++){ 
    var n = numarray[i].toString(); 
    var res= n.split("."); 
    n = res[0]; 

    if(highetlen < n.length){ 
    highetlen = n.length; 
    } 

} 

for(var j=0; j<numarray.length; j++){ 
    var s = numarray[j].toString(); 
    var res= s.split("."); 
    s = res[0]; 

    if(highetlen > s.length){ 
    var finallevel = highetlen - s.length; 

    var finalhigh = ""; 
    for(k=0;k<finallevel;k++){ 
    finalhigh = finalhigh+ '&#160; '; 
    } 
    numarray[j] = finalhigh + numarray[j]; 
    } 
    var nadiss = document.getElementById("nadis"); 
    nadiss.innerHTML += "<tr><td>" + numarray[j] + "</td></tr>"; 
}