Ghi đè màu nền theo một tỷ lệ nhất định

Question

Tôi đang thêm hàng qua một số <table> với một số foreach.

Tại một thời điểm nào đó, tôi muốn một ô có nền xám dựa trên tỷ lệ phần trăm được tính toán bằng PHP.

Ví dụ: 50% có nghĩa là một nửa nền của ô có màu xám, phần còn lại sẽ để trống | 33,33% = 1/3 nền, v.v ..

Các vấn đề tôi gặp phải là văn bản trong số <td> bị streched bởi bất kỳ div khác, nếu tôi áp dụng màu cho <td> Tôi cũng sẽ ghi đè lên các văn bản sau này vv ..

đây là mã:

$percent = 1/3; // For example 
$percent_friendly = number_format($percent * 100, 2); //This will return 33.33 

echo '<td>'.$percent_friendly.' % 
    <div style="background-color: grey"> // So I want the grey to fill 33.33% of the space 
    </div> 
    <div style="background-color: white"> 
    </div> 
</td>'; 

và phong cách áp dụng cho đến nay:

table { 
    margin-left:auto; 
    margin-right:auto; 
    font-size:18px; 
} 

table, th, td { 
    text-align: center; 
    border: 1px solid black; 
    position:relative; 
} 

tôi phải mất một cái gì đó nhưng C SS thực sự không phải là điều của tôi, bất kỳ lời giải thích hoặc giúp đỡ sẽ được đánh giá rất nhiều.

Answer 1

Đây là giải pháp đơn giản sử dụng 2 div có chiều rộng cố định. Phần trăm được chèn trực tiếp vào đánh dấu. Với thiết lập <p> đến một vị trí tuyệt đối, bạn không nên có vấn đề với kéo dài td.

table { 
 
    border: 1px solid; 
 
} 
 
td { 
 
    height: 50px; 
 
} 
 
.progress { 
 
    padding:0; 
 
    width: 200px; 
 
    border: 1px solid #555; 
 
    background: #ddd; 
 
    position: relative; 
 
} 
 
.bar { 
 
    height: 100%; 
 
    background: #57a; 
 
} 
 
.bar p { 
 
    position: absolute; 
 
    text-align: center; 
 
    width: 100%; 
 
    margin: 0; 
 
    line-height: 30px; 
 
}

<table> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 33.33%"><p>33.33% complete</p></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 16.66%"><p>16.66% complete</p></div> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td class="progress"> 
 
      <div class="bar" style="width: 66.66%"><p>66.66% complete</p></div> 
 
     </td> 
 
    </tr> 
 
</table>

nên làm việc trong tất cả các trình duyệt, bởi vì nó chỉ sử dụng các yếu tố chiều rộng.

Answer 2

Bạn có thể sử dụng một gradient tuyến tính cho màu nền, nếu bạn không nhớ nó có vẻ hơi khó hiểu:

echo '<td style="background: linear-gradient(to right, grey 0%,grey '.$percent.'%,white '.$percent.'%,white 100%);">'. 
      $percent_friendly.'%'. 
    '</td>'; 

Hãy nhận biết rằng mặc dù công việc này wont trong IE9 và dưới

Answer 3

Trong PHP:

echo " 
<td> 
    <div class='progress-bar' style='width: $percent_friendly%'></div> 
    <span>$percent_friendly%</span> 
</td>"; 

Trong CSS:

td    { position: relative; } 
td .progress-bar { position: absolute; background: grey; top: 0; bottom: 0; left: 0; } 
td span   { position: relative; } 

Điều này cho phép bạn áp dụng bất kỳ kiểu cấu trúc/phông chữ nào cho thành phần td và thanh tiến trình sẽ tự điều chỉnh chính xác.