asked on

CSS and HTML Table Issue

Hi,

Having an issue with HTML and CSS.

I have created tables in several pages so that text.images can be displayed easier. Problem is I can hide the table border but not the column borders. I want all of the table borders to be invisible. See attachment.

My CSS code is:

table, td, th ,tr
{ border-style:hidden; empty-cells:hide; width:75%;

}

Open in new window

and my HTML code is:

 <table style="border:0px;" cellpadding="0"><tr style="border:0px;" cellpadding="0"><td style="border:0px;" cellpadding="0"> <p> With two Team Managers Karly Sherlock and Ben Simpson</p></td>
  <td style="border:inherit"><img src="images/demo/KarlySherlock.jpg" width="150" height="100" alt="Karly Sherlock" /></td><td style="border:inherit"><img src="images/demo/BenSimpson.jpg" width="150" height="100" alt="Ben Simpson" /></td></tr></table>

Open in new window

One last thing. This error only seems to be happening on IE, within Firefor and Safari its fine.

Cheers.

Gurvinder Pal Singh

try
border-style:none

Gurvinder Pal Singh

add this to your table style as well

border-collapse: collapse;
border:none;

ASKER CERTIFIED SOLUTION

Tony van Schaik

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Simon2301

ASKER

@ TheRealTeune - A border still appears around the content.

Simon2301

ASKER

OK ive just added

style="border:0px;"

Open in new window

so...

<table class="noborders" style="border:0px;" width="400" border="0" cellspacing="0" cellpadding="0">

Open in new window

and this works now. I will do further testing next few days for other browsers but it certainly fixes it for IE.