pagebuilder and tables

By Jose Victor Villarreal, 10 years ago. Last reply by Andrew Misplon, 10 years ago.

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

hi, whenever i try to make tables using the text widget on pagebuilder it overrides all of my settings and instead of making a table with borders and centered text i get a borderless table with left-aligned text

please help

URL: http://www.suprasolar.mx/productos/accesorios

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

10 years, 10 months ago Andrew Misplon
Hi, I Work Here

Hi Jose
Thanks for running Page Builder. Can you perhaps describe the table you want verbally and I’ll write the CSS to assist with this task.
10 years, 10 months ago Jose Victor Villarreal
Hi andrew, yes, basically i just want the borders to show, to change the color of the font and the content to be centered.

10 years, 10 months ago Jose Victor Villarreal

this is my current table

<table border="2" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td colspan="6" align="center" bgcolor="#68af26">EQUIVALENCIA</td>
</tr>
<tr>
<td align="center" bgcolor="#68af26">LUMINARIA</td>
<td align="center" bgcolor="#68af26">ALTURA</td>
<td align="center" bgcolor="#68af26">HM</td>
<td align="center" bgcolor="#68af26">HPS</td>
<td align="center" bgcolor="#68af26">POTENCIA</td>
<td align="center" bgcolor="#68af26">FLUJO LUMINOSO DE LAMPARA</td>
</tr>
<tr>
<td align="center">30W</td>
<td align="center">5-7 m</td>
<td align="center">70W</td>
<td align="center">39W</td>
<td align="center">35W</td>
<td align="center">2,700 lm</td>
</tr>
<tr>
<td align="center">40W</td>
<td align="center">5-7 m</td>
<td align="center">100W</td>
<td align="center">70W</td>
<td align="center">45W</td>
<td align="center">3,600 lm</td>
</tr>
<tr>
<td align="center">60W</td>
<td align="center">5-7 m</td>
<td align="center">175W</td>
<td align="center">100W</td>
<td align="center">95W</td>
<td align="center">5,400 lm</td>
</tr>
<tr>
<td align="center">80W</td>
<td align="center">7-9 m</td>
<td align="center">250W</td>
<td align="center">150W</td>
<td align="center">135W</td>
<td align="center">7,200 lm</td>
</tr>
<tr>
<td align="center">100W</td>
<td align="center">7-9 m</td>
<td align="center">250W-400W</td>
<td align="center">150W - 250W</td>
<td align="center">145W</td>
<td align="center">9,000 lm</td>
</tr>
<tr>
<td align="center">120W</td>
<td align="center">7-9 m</td>
<td align="center">400W</td>
<td align="center">250W</td>
<td align="center">195W</td>
<td align="center">9,600 lm</td>
</tr>
<tr>
<td align="center">150W</td>
<td align="center">7-9 m</td>
<td align="center">-</td>
<td align="center">400W</td>
<td align="center">195W</td>
<td align="center">12,000 lm</td>
</tr>
</tbody>
</table>

10 years, 10 months ago Andrew Misplon

Hi, I Work Here

Give this a try. First, some slightly simplified HTML:

<table>
<tbody>
<tr>
<td colspan="6">EQUIVALENCIA</td>
</tr>
<tr>
<td>LUMINARIA</td>
<td>ALTURA</td>
<td>HM</td>
<td>HPS</td>
<td>POTENCIA</td>
<td>FLUJO LUMINOSO DE LAMPARA</td>
</tr>
<tr>
<td>30W</td>
<td>5-7 m</td>
<td>70W</td>
<td>39W</td>
<td>35W</td>
<td>2,700 lm</td>
</tr>
<tr>
<td>40W</td>
<td>5-7 m</td>
<td>100W</td>
<td>70W</td>
<td>45W</td>
<td>3,600 lm</td>
</tr>
<tr>
<td>60W</td>
<td>5-7 m</td>
<td>175W</td>
<td>100W</td>
<td>95W</td>
<td>5,400 lm</td>
</tr>
<tr>
<td>80W</td>
<td>7-9 m</td>
<td>250W</td>
<td>150W</td>
<td>135W</td>
<td>7,200 lm</td>
</tr>
<tr>
<td>100W</td>
<td>7-9 m</td>
<td>250W-400W</td>
<td>150W - 250W</td>
<td>145W</td>
<td>9,000 lm</td>
</tr>
<tr>
<td>120W</td>
<td>7-9 m</td>
<td>400W</td>
<td>250W</td>
<td>195W</td>
<td>9,600 lm</td>
</tr>
<tr>
<td>150W</td>
<td>7-9 m</td>
<td>-</td>
<td>400W</td>
<td>195W</td>
<td>12,000 lm</td>
</tr>
</tbody>
</table>

Next insert the below into Appearance > Custom CSS and edit as required. Looks good on my side:

.entry-content table {
border: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}

.entry-content table td {
border: 1px solid #ededed;
padding: 0.5em;
}

.entry-content table tr:first-of-type td {
background: #68af26;
color: #fff;
font-weight: bold;
}

.entry-content table tr:nth-child(2) td {
background: #68af26;
border: none;
color: #fff;
font-weight: bold;
}

10 years, 10 months ago Jose Victor Villarreal
Hi andrew,
it kinda half worked. i can see the border lines now, and the text color is exactly as i wanted, but it still wont center the text. also if i try to change the border size or the border color it doesn’t do anything
10 years, 10 months ago Jose Victor Villarreal
http://www.suprasolar.mx/productos/accesorios
10 years, 10 months ago Jose Victor Villarreal
ok, i went to the theme css and changed
from this
```
caption,th,td{
font-weight:normal;
text-align:left;
}
```
from this
```
caption,th,td{
font-weight:normal;
text-align:center;
}
```
and it seems to be working now

10 years, 10 months ago Andrew Misplon

Hi, I Work Here

Ahh my bad, I forgot to center the text.

Changes made to style.css won’t survive theme upgrade which is why you need to place your additions under Appearance > Custom CSS. So your complete Custom CSS should be:

.entry-content table {
border: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}

.entry-content table td {
border: 1px solid #ededed;
padding: 0.5em;
text-align: center;
}

.entry-content table tr:first-of-type td {
background: #68af26;
color: #fff;
font-weight: bold;
}

.entry-content table tr:nth-child(2) td {
background: #68af26;
border: none;
color: #fff;
font-weight: bold;
}

10 years, 10 months ago Jose Victor Villarreal
got it, so all changes must be made to the custom css.
the new code work thanks a lot.
now one last question. what if i want another type of table,
can i create a class?
10 years, 10 months ago Andrew Misplon
Hi, I Work Here

Yes, all code CSS inserted under Appearance > Custom CSS. This will apply to all your tables. All I’ve done with the last two selectors is say, the first row, make that bold, green bg and white text and do the same for the second row but with no border.

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Page Builder

Widgets Bundle

SiteOrigin CSS

SiteOrigin Installer

WordPress Themes

Site Packs

Support Forum

SiteOrigin Blog

pagebuilder and tables

Get The Most Out of SiteOrigin with SiteOrigin Premium