Konwersja szerokości od procentu do pikseli

Question

Mam tabeli wewnątrz <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; 
} 

jestem obliczania szerokości td21 z $('.td21').width() i przypisywanie szerokości do td11 jak $('td11').width($('.td21').width()).

Problem polega na tym, że stosowane szerokości nie są takie same, różnią się one o 1px i nie mogłem znaleźć sposobu, w jaki występuje różnica 1px. Szerokość .td21 jest większa niżwiększa niż .td11.

Czy ktoś może mi pomóc znaleźć rozwiązanie?

Answer 1

Spróbuj użyć .outerWidth() zamiast .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

Dzieje się tak, gdy używasz procent + dopełnienie. Piksel jest int, więc zostanie zaokrąglony.

W twoim przykładzie: 10%, 20% i 70% to szerokość kontenera, a następnie musisz dodać dopełnienie i obramowanie.

Przy tej liczbie dziesiętnej wystąpi i trzeba zaokrąglić.

PRZYKŁAD:

Twoja strona jest 900px szerokości. Bez wypełnienia, marginesu lub obramowania będziesz miał szerokość 630px (70%), 160px (20%), 90px (10%).

Ale po dodaniu obramowania + wypełnienia, procenty muszą być obliczone z 900 - (3 tony * 10px padding (po lewej i prawej)) - (3 tds * 2px border (left and right)) = 864px.

Przy szerokości 864px otrzymasz: 604,8px (70%), 172,8px (20%), 86,4px (10%).

I tu pojawia się różnica 1px.