Title: Style table inside post
Last modified: August 21, 2016

---

# Style table inside post

 *  Resolved [infinisistemas](https://wordpress.org/support/users/infinisistemas/)
 * (@infinisistemas)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/style-table-inside-post/)
 * 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](https://wordpress.org/support/users/joelymil/)
 * (@joelymil)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/style-table-inside-post/#post-4842443)
 * ‘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](http://stackoverflow.com/questions/628301/css3s-border-radius-property-and-border-collapsecollapse-dont-mix-how-can-i),
   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](https://wordpress.org/support/users/infinisistemas/)
 * (@infinisistemas)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/style-table-inside-post/#post-4842444)
 * 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](https://wordpress.org/support/users/joelymil/)
 * (@joelymil)
 * [12 years, 1 month ago](https://wordpress.org/support/topic/style-table-inside-post/#post-4842445)
 * 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

 * [table css](https://wordpress.org/support/topic-tag/table-css/)

 * 3 replies
 * 2 participants
 * Last reply from: [joelymil](https://wordpress.org/support/users/joelymil/)
 * Last activity: [12 years, 1 month ago](https://wordpress.org/support/topic/style-table-inside-post/#post-4842445)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics