Centric – Tables Question

[kmpro]

When I create a table using either plugins for that or direct html entry, I end up with a border (thin, grey) at the top and bottom of the table and at each cell separation. I know that I've set to have no borders of any kind. Is there something that I'm missing, like a setting within CSS somewhere that puts borders in tables?

[kmpro]

Did one last search of the forum and found it this time. So found, and fixed.

[Mike]

Hi kmpro,

Could you provide a link to the topic to help others who have the same question? That would be very cool.

[carasmo]

Genesis styles all tables globally to do exactly as you described. You can over-ride this behavior by finding:

/* ## Tables
--------------------------------------------- */

Removing all the of the styles and replacing with the CSS below. I've created a class .border-table for tables that you want to look this way and then use just the default browser unstyled tables for other tables, which means that you add no class and do nothing. However, if you want tables to have the borders, then you would use the class .border-table on the table itself by editing the html.

table.border-table{
	border-collapse: collapse;
	border-spacing: 0;
	line-height: 2;
	margin-bottom: 40px;
	width: 100%;
}

.border-table tbody {
	border-bottom: 1px solid #ddd;
}

.border-table td,
.border-table th {
	text-align: left;
}

.border-table td {
	border-top: 1px solid #ddd;
	padding: 6px 0;
}

.border-table th {
	font-weight: 400;
}

Usage

<table class="border-table" >

---

Genesis Theme Customization and Help

[kmpro]

Sure, here's where I found it along with a cut/paste of it:

Remove All Table Borders

Below is what you're looking for in your style.css. Simply change border bottom and border top from 1px to 0px. That's all there is to it.

In your stylesheet, around line 383, find this code:

/* Tables
--------------------------------------------- */

table {
border-collapse: collapse;
border-spacing: 0;
line-height: 2;
margin-bottom: 40px;
width: 100%;
}

tbody {
border-bottom: 1px solid #ddd;
}

th,
td {
text-align: left;
}

th {
font-weight: bold;
text-transform: uppercase;
}

td {
border-top: 1px solid #ddd;
padding: 6px 0;
}

[Mike]

Thanks kmpro! Great stuff on that and from carasmo as well.

[Author]

Posts