Style table inside post

  • Resolved infinisistemas

    (@infinisistemas)


    12 years, 1 month ago

    Hi, i am using WP e-coomerce and inside the posts i have to include a table, it seems wordpress lets me give this table an ID, and even chrome shows me the css i placed in the stylesheet, but its not working =/

    #productostb
{
border-radius: 10px;
padding-left:5px;
border-spacing:5px;
}

#productostb .td
{
background-color:#FFDAFF;
}

#productostb .primary
{
width:40%;
max-width:40%;
}
    <table id="productostb" width="600px" cellspacing="6">
<tbody>
<tr>
<td class="primary">Potencia</td>
<td colspan="6">19,20W</td>
</tr>
<tr>
<td>Voltaje de Alimentación</td>
<td colspan="6"></td>
</tr>
<tr>
<td>Consumo por Módulo</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Color</td>
<td colspan="2">Blanco Calido</td>
<td colspan="2">Blanco Neutro</td>
<td colspan="2">Blanco Frio</td>
</tr>
<tr>
<td>Longitud de onda</td>
<td colspan="2">Blanco Calido</td>
<td colspan="2">Blanco Neutro</td>
<td colspan="2">Blanco Frio</td>
</tr>
<tr>
<td>Tipo de LED</td>
<td colspan="3">Blanco Calido</td>
<td colspan="3">Blanco Neutro</td>
</tr>
<tr>
<td>Cantidad de LED's</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Vida Útil</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Grado de Protección</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Temperatura de Trabajo</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Temperatura de Almacenamiento</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Dimensiones</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Material</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Fijación</td>
<td colspan="6">Doe</td>
</tr>
<tr>
<td>Tiempo de Conexión</td>
<td colspan="6">Doe</td>
</tr>
</tbody>
</table>
Viewing 3 replies - 1 through 3 (of 3 total)
  • joelymil

    (@joelymil)

    12 years, 1 month ago

    ‘Found a solution for you.

    First, the most simple problem is that you’re using a class selector for the td elements instead of selecting all the td elements in #productostb It needs to be #productostb td instead of #productostb .td – just need to remove the period. This is why your background color isn’t working.

    The #productostb .primary rule is working so we can leave that how it is.

    The border-radius issue comes from the fact that when you round the corners of a table, its td elements don’t automatically round as well.

    It’ll probably be easiest just to start from scratch with your table styling in order to do the following. This code is going to:

    1. Set the width and max-width of the first column using your existing code
    2. Style the table as a whole
    3. Give the td elements your desired background color and padding, and give them a border-right and border-bottom
    4. Give the first column a border-left
    5. Give the first row a border-top
    6. Round the appropriate corners of the appropriate td elements themselves, instead of the corners of the table itself.

    The following is borrowed and adapted from here, btw.

    /* Your existing styling that we'll keep */

#productostb .primary {
    width:40%;
    max-width:40%;
}

/* New styling for the table */

#productostb {
    border: none;
    border-collapse: separate;
    border-spacing: 0;
}

#productostb tr td {
    background-color:#FFDAFF;
    border-right: 1px solid #bbb;
    border-bottom: 1px solid #bbb;
    padding: 10px;
}

#productostb tr td:first-child {
    border-left: 1px solid #bbb;
}

#productostb tr:first-child td {
    border-top: 1px solid #bbb;
}

/* top-left border-radius */
#productostb tr:first-child td:first-child {
    border-top-left-radius: 10px;
}

/* top-right border-radius */
#productostb tr:first-child td:last-child {
    border-top-right-radius: 10px;
}

/* bottom-left border-radius */
#productostb tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

/* bottom-right border-radius */
#productostb tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}
    Thread Starter infinisistemas

    (@infinisistemas)

    12 years, 1 month ago

    Wow that is a way more complete answer than I was expecting, it really is styling it, thanks a lot for your help, now its working alright.

    joelymil

    (@joelymil)

    12 years, 1 month ago

    haha no problem. It was good learning experience for me!

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Style table inside post’ is closed to new replies.

Tags