Tengo una tabla en donde tengo un espacio entre dos filas <tr> de la tabla. Yo lo hice en la siguiente forma:

table.fltrTbl
{
    margin:0px;
    padding:0px;
    border-collapse:separate;
    border-spacing:0 11px;  
}

table.fltrTbl td
{ 
    vertical-align:middle;
    padding-right:14px; 
    padding-left:0;
    padding-top:0;
    padding-bottom:0;
    margin:0;
}

table.fltrTbl tr
{ 
}

Pero, esta solución no está trabajando con IE7. Puedes sugerir cualquier cambio a esta clase con el fin de hacer que el trabajo en IE7?

Nota: por Favor, no responder a aplicar clase separada para cada tr en la tabla.

InformationsquelleAutor Mayur | 2010-08-09

6 Comentarios

  1. 5

    Intentar quitar el borde de espaciado, cambio borde del colapso colapso y sólo tiene que utilizar el td de relleno para crear el espacio.

    • Por desgracia, el relleno no funciona bien con el vertical-align:middle
  2. 3

    IE7 no admite border-spacing a todos. (Y el IE 8 con un solo valor). Para IE7 puede utilizar el atributo HTML cellspacing lugar – pero también con un valor de espaciado tanto horizontal como vertical.

    El único navegador cruz manera de tener un espacio horizontal en la tabla es el uso de una tabla en blanco de la fila y celda.

    • que está mal, esto funciona en IE7. *border-collapse: expression('separate', cellSpacing = '5px');
    • Puedes mostrar algo de documentación sobre cómo funciona esto?
    • lo que IE7 documentación? ¿Por qué no correr que en IE7 y ver si funciona? Sé que hace el trabajo por: 1. Anteponiendo el asterisco (*) antes de la instrucción (un conocido hack para IE7) y 2. La aplicación de una expresión ( de la forma que MS le gusta hacer las cosas). Podría ser más detallado …..
    • Supuse que no funcionó, pero lo que me interesa, fue cellSpacing = '5px' como el segundo argumento, que de acuerdo a MSDN normalmente serían una cadena de determinar el lenguaje de secuencias de comandos, que, obviamente no. ¿Por qué una asignación de variable de trabajar allí, y por qué se aplican al elemento seleccionado?
    • ustedes hicieron lo correcto al asumir que funciona (lo he probado). Creo que la evaluación de la expresión funciona de forma diferente en hack-modo; en cualquier caso, » 5px » en mi libro es una cadena, considere la posibilidad de *border-collapse: expression('separate', cellSpacing = 5); y si usted tiene el tiempo, también ejecutado.
  3. 1

    He conseguido el efecto deseado utilizando border: 2px solid transparent sólo para ie7 (puede utilizar el condicional comentarios para aplicar este estilo sólo para ie7).

    En el ejemplo he añadido un 2px transparente frontera en todo el td, pero puede ser que los valores que desee, y trabaja para la específica de las fronteras, tales como border-left o border-bottom.

  4. 1

    Para cambiar la la frontera-el colapso de la propiedad a border-collapse: separate en el td elemento es lo que ha funcionado. Según el W3C, cuando se utiliza collapse border-spacing y vaciar las células propiedades serán ignorados. Cuando se utiliza separate border-spacing propiedades son honrados, y que es lo que queremos.

  5. 1

    He encontrado una solución a través de la expresión:

    *border-collapse: expression('separate', cellSpacing = '5px');
  6. 0

    Para agregar espacio a mi los elementos de menú que he usado un relleno-parte inferior de atributo en mi css.

    <style>
    div.c4 {
               font-family: Arial, Helvetica, sans-serif;
               font-size: 12px;
               font-weight: bold;
               text-align: left;
               color: #800000;
               padding-bottom: .5em;
            }
    </style

    El HTML:

    <table width="15%" style="margin: auto;" >
    <tr>
    <th scope="col">
    <div class="c4">Home</div>
    <div class="c4">About Me</div>
    <div class="c4">Photographs</div>
    <div class="c4">Locations</div>
    <div class="c4">Testimonials</div>
    </th>
    </tr>
    </table>

    aquí está mi jsfiddle ejemplo:
    http://jsfiddle.net/IConway/htsqoe7j/

Dejar respuesta

Please enter your comment!
Please enter your name here