Chuyển đổi chiều rộng từ phần trăm pixel

Question

Tôi có một bảng bên trong một <div>:

<div id="fixeddiv"> 
    <table id="fixedtable"> 
     <tr class="firstrow"> 
      <td class="td11"></td> 
      <td class="td12"></td> 
      <td class="td13"></td> 
     </tr> 

     <tr class="secondrow"> 
      <td class="td21" style="width:10%"></td> 
      <td class="td22" style="width:20%"></td> 
      <td class="td23" style="width:70%"></td> 
     </tr> 
    </table> 
</div> 

CSS:

#fixeddiv 
{ 
    overflow:auto; 
    margin:0px; 
    padding:0px; 
    position: relative; 
    text-align:left; 
    width: 48%; 
} 

#fixedtable 
{ 
    background-color: White; 
    border-spacing:0px; 
    cursor: pointer; 
    width: 100%; 
    height: 100%; 
    font-family: Calibri !important; 
    color: Black; 
    font-size: 14px; 
} 

.firstrow 
{ 
    position: absolute; 
    margin: 0px; 
    left: 0; 
    top: 0; 
    background: url(../Content/Images/header.jpg) repeat-x center top; 
    color: White; 
    font-weight: bold; 
    text-align: center; 

} 
#fixedtable tr td 
{ 
    padding: 5px !important; 
    border: 1px solid #FFFFFF; 
    text-align: center; 
} 

Tôi đang tính toán độ rộng của td21 với $('.td21').width() và gán chiều rộng để td11 như $('td11').width($('.td21').width()).

Vấn đề là chiều rộng áp dụng không giống nhau, chúng thay đổi theo 1px và tôi không thể tìm thấy sự khác biệt này xảy ra như thế nào 1px. Chiều rộng .td21 là 1px lớn hơn .td11.

Có thể ai giúp tôi tìm giải pháp không?

Answer 1

Hãy thử sử dụng .outerWidth() thay vì .width()

Answer 2

<div id="div-1" style="width: 1000px;"> 
    <div id="div-2" style="width: 10%;"></div> 
</div> 

<script language="javascript">     
    var percents = parseInt(document.getElementById("div-2").style.width); 
    var parentWidth = parseInt(document.getElementById("div-1").style.width); 
    var pixels = parentWidth*(percents/100); 
    alert(pixels); // will print "100" 
</script> 

Answer 3

Điều này xảy ra khi bạn sử dụng phần trăm + đệm. Pixel là int và vì vậy nó sẽ được làm tròn.

Trong ví dụ của bạn: 10%, 20% và 70% là chiều rộng của vùng chứa và bạn cần phải thêm phần đệm và đường viền.

Với số thập phân này sẽ xảy ra và không cần làm tròn.

VÍ DỤ:

Trang của bạn là 900px chiều rộng. Không có đệm, lề hoặc viền, bạn sẽ có chiều rộng 630px (70%), 160px (20%), 90px (10%).

Nhưng khi bạn thêm đường viền + phần đệm phải được tính từ 900 - (3 tds * 10px đệm (trái và phải)) - (3 tds * 2px border (trái và phải)) = 864px.

Với chiều rộng 864px, bạn sẽ nhận được: 604,8px (70%), 172,8px (20%), 86,4px (10%).

Và đây là nơi xảy ra sự khác biệt 1px.