View Full Version : Suppress or Hide Table Borders

Feb 1st, 2010, 07:39 PM

I have a table and each row alternates background colors, but the background color "bleeds" through on the cell borders.

Is there a way to suppress this so each row is one continous color?
row 1 background red
row 2 background green
row 3 background red
row 4 background green

Thank you in advance for your help!

Feb 1st, 2010, 07:47 PM
Just remove the borders? I hope you are displaying data in those tables. You can use border:0; in CSS or border="0" in html on the table element.

Feb 1st, 2010, 08:04 PM
I'm sorry I should have provided that information.

3 columns, first two are text and the third is an input box.

<table style="border:0;">

Still shows the border.

Feb 1st, 2010, 08:36 PM
I have been unable to replicate your problem. Here is a test table without bleeding:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<html lang='en'>
<meta http-equiv='Content-type' content='text/html;charset=UTF-8'>
<title>Table Background</title>
<style type="text/css">
.red {background: red;}
.green {background: green;}
table {border-collapse: collapse;}
<h1>Table Background</h1>
<p>Here is a red and green table:</p>
<tr class="red"><th></th><th>col 1</th><th>col 2</th><th>col 3</th></tr>
<tr class="green"><th>row 1</th><td>data 1,1</td><td>data 2,1</td><td>data 3,1</td></tr>
<tr class="red"><th>row 2</th><td>data 1,2</td><td>data 2,2</td><td>data 3,2</td></tr>
<tr class="green"><th>row 3</th><td>data 1,3</td><td>data 2,3</td><td>data 3,3</td></tr>
<tr class="red"><th>row 4</th><td>data 1,4</td><td>data 2,4</td><td>data 3,4</td></tr>
Just a thought - the contrast between solid blocks of red and green is so high that to me it causes optical illusions - is this the problem, rather than bleeding of colours?

Feb 1st, 2010, 08:43 PM
border-collapse: collapse;

is what I need!

Thank you mbaker!