Mi css está situado en la http://sillybean.net/css/seaglass.css y quiero usar este css para sólo uno de la tabla html, En la misma página tengo varias tablas html así que no quiero afectar a otras tablas de html. ¿Cuál es la manera más rápida de hacerlo con menos de modificación en http://sillybean.net/css/seaglass.css ?

OriginalEl autor cometta | 2009-06-19

8 Comentarios

  1. 29

    Usted puede simplemente aplicar una clase a la tabla que desee, a continuación, utilizar esa clase en el CSS?

    En el HTML, usted puede poner:

    <table class="mytable">
    ... CONTENT OF THE TABLE, AS NORMAL ...
    </table>

    Y, a continuación, añadir el selector de clase CSS:

    table.mytable { border-collapse: collapse; border: 1px solid #839E99;
    background: #f1f8ee; font: .9em/1.2em Georgia, "Times New Roman", Times, serif; color: #033; }
    .mytable caption { font-size: 1.3em; font-weight: bold; text-align: left; padding: 1em 4px; }
    .mytable td,
    .mytable th { padding: 3px 3px .75em 3px; line-height: 1.3em; }
    .mytable th { background: #839E99; color: #fff; font-weight: bold; text-align: left; padding-right: .5em; vertical-align: top; }
    .mytable thead th { background: #2C5755; text-align: center; }
    .mytable .odd td { background: #DBE6DD; }
    .mytable .odd th { background: #6E8D88; }
    .mytable td a,
    .mytable td a:link { color: #325C91; }
    .mytable td a:visited { color: #466C8E; }
    .mytable td a:hover,
    .mytable td a:focus { color: #1E4C94; }
    .mytable th a,
    .mytable td a:active { color: #fff; }
    .mytable tfoot th,
    .mytable tfoot td { background: #2C5755; color: #fff; }
    .mytable th + td { padding-left: .5em; }
    de hecho, esto es casi como «namespacing» sus definiciones css.
    yo por ahora no es un experto en CSS – pero según mis pruebas, hay al menos un error en el CSS anterior: .mytable td, th {/* ... */} sólo afecta a td (células) que tiene la clase mytable (a causa de la tabla de la clase) – pero afecta a la todos los encabezados de tabla th. en mi humilde opinión la sintaxis correcta tiene que ser: .mytable td, .mytable th {/* ... */}. (probado en las versiones más recientes de chrome, firefox e IE)

    OriginalEl autor

  2. 3

    Definir un ID o CLASE en el CSS que afectan a la tabla en cuestión.

    A continuación, en el código HTML, es decir

    <table id="theid"... /> 

    o

    <table class="theclass" ... />

    El CSS ID parece

    #theid
    {
    //attributes
    }

    Clases de aspecto:

    .theclass
    {
    //attributes
    }
    Me gustaría recomendar table#theid como identificadores son de un solo uso, que creo que mejor responda a la pregunta.

    OriginalEl autor

  3. 2

    Esto es exactamente lo que los atributos id y class. Si usted no puede cambiar el lenguaje de marcado (como el estilo de myspace), entonces usted necesita utilizar los selectores de destino de la tabla de forma más precisa. La elección de los selectores es algo que tendrás que decidir por ti mismo.

    OriginalEl autor

  4. 2

    Para Varias tablas y Clases de

    Tabla HTML

    <table id="tableId1">
    --Table Content--
    </table>
    <table id="tableId2">
    --Table Content--
    </table>
    <table class="tableClass1">
    --Table Content--
    </table>
    <table class="tableClass2">
    --Table Content--
    </table>

    CSS Script

    #tableId1, #tableId2
    {
    //attributes
    }
    .tableClass1, .tableClass2
    {
    //attributes
    }

    OriginalEl autor

  5. 1

    Aquí son los selectores de clase y un marcado estilo de la primera tabla, pero no la segunda:

    <style>
    table.special { border: 1px solid #839E99; ... }
    table.special caption { font-size: 1.3em; ... }
    ...
    </style>
    <table class="special">...</table>
    <table>...</table>

    O puede utilizar un selector de ID de manera similar:

    <style>
    #my-special-table { border: 1px solid #839E99; ... }
    #my-special-table caption { font-size: 1.3em; ... }
    ...
    </style>
    <table id="my-special-table">...</table>
    <table>...</table>

    A veces una guerra religiosa rompe acerca de cuál de estos dos enfoques para el uso. Tampoco es correcto para sus necesidades. De acuerdo a la especificación, sólo se puede poner un ID determinado en más de un elemento HTML (pero la mayoría de los navegadores le permiten romper esa regla).

    OriginalEl autor

  6. 0

    Aplicar el nombre de la Clase a la tabla en la que desea aplicar css resto está muy bien…

    OriginalEl autor

  7. 0

    Mientras que usted debe agregar una clase a la tabla que desee cambiar, vamos a suponer que sólo puede modificar el css. En el caso de que usted puede conseguir bastante de lujo con selectores. Pero no todos los los navegadores soportan ellos. Se puede ver que el Los selectores de CSS 2 no apoyo el n-ésimo hijo concepto. De lo contrario, si había html como:

    <html><head></head><body>
    <table><tr><td>First</td></tr></table>
    <table><tr><td>Second</td></tr></table>
    <table><tr><td>Third</td></tr></table>
    </body></html>

    Podría orientar a la primera con CSS2 selectores, pero la segunda y la tercera sólo pueden ser dirigidos con CSS3.

    table:first-child td {background-color:red;} /* CSS2, pretty wide support */
    table:nth-child(2) td {background-color:red;} /* CSS3, limited support */

    OriginalEl autor

  8. -1

    Seleccione la tabla por clase para el estilo deseado de la tabla de e.g si usted tiene tabla:

    <table class="tableOne"></table>
    <table class="tableTwo"></table>

    Luego en el CSS, usted tendrá que usar algo como esto:

    .classOne {
    /* do your stuff here*/
    }
    .classTwo {
    /* do your stuff here*/
    }

    OriginalEl autor

Dejar respuesta

Please enter your comment!
Please enter your name here