Problema celdas

link_alcala06 · #1 (**permalink**) 28/01/2011, 09:27

Código CSS:

Ver original#principal{
    width:18&#37;;
    margin:auto auto;
    background-color:e0dfe3;
    border-color:black;
    border-style:solid;
    border-width:1px;
}
#resultado{
    width:100%;
}
input.campotexto{
    text-align:right;
}
input{
    font-family:Arial;
    font-size:20;
}

Código HTML:

Ver original<html>
    <head>
        <link rel="stylesheet" type="text/css" href="calculadorabasica.css">
    </head>
    <body>
        <table id="principal">
            <tr>
                <td id="titulo">Calculadora</td>
            </tr>
            <tr>
                <td>
                    <input class="campotexto" type="text" id="resultado">
                </td>
            </tr>   
            <tr>    
                <td>
                    <input type="button">
                    <input type="button" value="Ayuda" onclick="ayuda()">
                    <input type="button" value="Retroceso">
                    <input type="button" value="CE" onclick="borrar(resultado)">
                    <input type="button" value="C" onclick="borrar(resultado)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="MC">
                    <input type="button" value="7" onclick="pulsar(this)">
                    <input type="button" value="8" onclick="pulsar(this)">
                    <input type="button" value="9" onclick="pulsar(this)">
                    <input type="button" value="/" onclick="pulsar(this)">
                    <input type="button" value="sqrt">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="MR">
                    <input type="button" value="4" onclick="pulsar(this)">
                    <input type="button" value="5" onclick="pulsar(this)">
                    <input type="button" value="6" onclick="pulsar(this)">
                    <input type="button" value="*" onclick="pulsar(this)">
                    <input type="button" value="%" onclick="pulsar(this)">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="MS">
                    <input type="button" value="3" onclick="pulsar(this)">
                    <input type="button" value="2" onclick="pulsar(this)">
                    <input type="button" value="1" onclick="pulsar(this)">
                    <input type="button" value="-" onclick="pulsar(this)">
                    <input type="button" value="1/x">
                </td>
            </tr>
            <tr>
                <td>
                    <input type="button" value="M+">
                    <input type="button" value="0" onclick="pulsar(this)">
                    <input type="button" value="+/-">
                    <input type="button" value=",">
                    <input type="button" value="+" onclick="pulsar(this)">
                    <input type="button" value="=" onclick="igual(resultado)">
                </td>
            </tr>
        </table>
    </body>
</html>

He estado probando y quiero dejar las celdas centradas y uniformes en fila, pero no consigo alguna manera de ponerlo, alguien sabria como hacerlo con CSS? u.u Mil gracias!

PD: lo ideal seria que quedaran estilo a la calcu de windows http://image.gxzone.com/images/0/8/08dcc2777cb.jpg >.<

jomaruro · #2 (**permalink**) 28/01/2011, 10:19

Hola:

¿Has probado a darle un width fijo a cada celda?

Saludos.

link_alcala06 · #3 (**permalink**) 28/01/2011, 11:05

Cita:

Iniciado por jomaruro

Hola:

¿Has probado a darle un width fijo a cada celda?

Saludos.

Si, pero sigue sin mostrarme las celdas con borde y ordenarlas >_<

sanxuan · #4 (**permalink**) 28/01/2011, 15:47

Prueba a darle a la tabla la propiedad border-collapse:collapse;. Por defecto, los bordes de la tabla van a ser dobles. Con esta propiedad los dos bordes se convierten en uno solo.

Si quieres usar bordes separados (border-collapse:separate) se puede especificar la distancia entre bordes con la propiedad border-spacing. Esta propiedad se aplica a los elementos table, hd y td.

Se pueden especificar dos valores diferentes para la separación horizontal y vertical respectivamente. Si se especifica sólo un valor, se usa éste tanto para la separación horizontal como para la vertical. Los valores no pueden ser negativos y por defecto, el valor es cero.

La distancia entre el borde de la tabla y el de las celdas es la suma de la propiedad padding de la tabla más el valor horizontal o vertical de la propiedad border-spacing.