Remove All Table Borders

[jono.cusack]

Hi Guys,

Is there a CSS to remove the faint grey border around tables? I want absolutely zero borders on tables.

Cheers!

Jono

http://www.seesomething.com.au

[Tom]

(With your stylesheet minimized we can't navigate your site's CSS code.)

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;
}

Edit the border values as you wish.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jono.cusack]

Hey Tom,

Thanks for getting back to me, I've got some very simple IT question, but I'm new to this.

What does it mean that my stylesheet is minimized? And otherwise, I'm not sure where to edit the entire code, like where is that search for line 383?

Thanks!

Jono

[Tom]

Hi Jono,

From your question about CSS I assumed some familiarity with editing your theme's stylesheet. Your stylesheet has been compressed (minimized) by your caching plugin, W3 Total Cache. That makes it impossible to direct you accurately to the code in your stylesheet that you'll need to change to modify the appearance of your table borders. No problem; we can probably get you close enough that you can find it and make the changes.

A couple questions first:
Are you familiar with FTP?
Have you modified CSS code before?

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jono.cusack]

Thanks for getting back to me so quickly!

The only modifications to CSS is adding the simple edits to the stylesheet through the theme menu, I haven't actually modified it directly before.

Should I remove W3 Total Cache for the time being?

Thanks again!

[Tom]

It's possible to do this from the WordPress theme editor, if you are very careful.

Find or create a table so that you can check the results of your changes, (I couldn't find one on the few pages I looked at.)
Disable W3 Total Cache.
Download a copy of your stylesheet (style.css) or otherwise make a copy and save to your PC/Mac. (eg. from Appearance > Editor, choose the stylesheet [style.css] under "Styles" for Magazine Pro, select all of the CSS code and save it to a local file.)
Back in the Editor, find the lines of code for Tables, as shown above. Carefully replace that code with this code (only 2 lines are changed):

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

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

tbody {
	border-bottom: none;
}

th,
td {
	text-align: left;
}

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

td {
	border-top: none;
	padding: 6px 0;
}

Click on "Update File" and check your sample table to see the changes.
Once you're done you can re-enable W3 Total Cache.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[jono.cusack]

Thanks so much mate! Worked a treat!

[Tom]

That's great Jono. (Don't forget to mark this thread resolved.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts