conversión de ancho a partir del porcentaje de píxeles

Question

Tengo una tabla dentro de una <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; 
} 

estoy calculando el ancho de td21 con $('.td21').width() y asignar el ancho de td11 como $('td11').width($('.td21').width()).

El problema es que los anchos que se aplican no son los mismos, varían en 1px y no pude encontrar cómo se produce esta diferencia 1px. El ancho .td21 es 1px mayor que .td11.

¿Puede alguien ayudarme a encontrar la solución?

Answer 1

Intente utilizar en lugar de .outerWidth().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

Esto sucede cuando se utiliza por ciento + relleno. Pixel es int y por lo tanto será redondeado.

En su ejemplo: 10%, 20% y 70% es el ancho del contenedor y de lo que necesita para agregar el relleno y el borde.

Con este número decimal ocurrirá y será necesario redondearlo.

Ejemplo:

Su página es 900px de ancho. Sin relleno, margen o borde, tendrá anchuras de 630px (70%), 160px (20%), 90px (10%).

Pero cuando agrega el borde + relleno los porcentajes se deben calcular a partir de 900 - (3 tds * 10px relleno (izquierdo y derecho)) - (3 tds * 2px borde (izquierdo y derecho)) = 864px.

Con 864px de ancho obtendrá: 604,8px (70%), 172,8px (20%), 86,4px (10%).

Y aquí es donde se produce la diferencia de 1px.