CSS - Table Border Doesnt Display.

Alright, this is probably a simple fix but I can not find the solution anywhere. I'm trying to highlight a table cell with a 2px solid red border when it is clicked.

Is there a way to get this to happen with out changing the size of the cell?

I hope this makes sense. Basically the cell is expanding by 1 px causing movement in the table.

Is it possible to tell CSS to make the border for say, a table, show on three sides? (Not one, not four, not two....three sides)

Thanks for your time. Still learning design, so thanks for your help if they are easy solutions.

Border Issue:
In IE and FF I have a complete border on a few header div's. The bottom and top border is different color than the left and right borders. You can see that the dark brown bottom and top borders appear to lay overtop of the white left and right borders.

Website is he
http://onlinecasinoboss.true2formde...e.php?page=home

Styling CSS is he
http://onlinecasinoboss.true2formde...aster-style.css

Layout CSS is he
http://onlinecasinoboss.true2formde...ster-layout.css

IE Layout Issue:

In FF the three center content columns display how I want it to look. When you view the same home.html page in IE you can see that they don't space out how I'd like. It is most visible by compairing the boxes on the right of the center content.

Thanks a ton for your time and help, I appreciate it.

I have an HTML table that contains a lot of data, so I want to separate the rows and columns with a grid. Nothing out of the ordinary. Basically make it look like an excel spreadsheet. A grid.

The basic HTML border=1 property works, but I want to make the border thinner, just 1px, using CSS. I'm very new to CSS though so I don't know how. I tried style="border: 1px solid" but that just makes a border around the outside of the table. I want every cell to be isolated. Any ideas? Thanks.

Hello:
I am building a ecommerce site, there are featured product on frontpage, I want to make a square border for each product, I have done top border and bottom border, but I don't know how to make the vertical lines on the right and left to make a nice square border with rounded corner

the html structure is as followings
table-----for the top border
table-----to display product image and price, all that
table-----for the bottom border

I know by putting in css code for the middle table will be able to close this border

could anyone tell me how?

just getting into the css world for real, and im using it for the borders of a table:
border:1px solid #000000;
except this only does the outside border of the table, and not the borders for the rows/columns
do i need to have another .cell in my css to get each one to work?

Hi,
I am having problem with the following table.
It displays red border (#ff0000) around table in Internet explorer.
In Firefox red border does not show at all. It is just #ccc.
What can I do to have red border displayed in Firefox too?

Code:

<table class="maintable">
<tr>
<th scope="col" nowrap>City</th>
<th scope="col">State</th>
<th scope="col">Zipcode</th>
</tr>

<tr><td align="center">London</td>
<td>England</td>
<td>12345</td>
</tr>

<tr><td align="center">Berlin</td>
<td>Germany</td>
<td>6789</td>
</tr>
</table>


.maintable {
line-height: 2.5em;

border: 1px solid #ff0000;
border-collapse: collapse;
}

.maintable th, .maintable td { padding: 0 5px; }

.maintable th {
border: 1px solid #ccc;
}

.maintable td {
border: 1px solid #ccc;
}

Thank you

Hi, I am making a website for my friend that lost her myspace acount becuase of here small uncle. So I want to make a website for her that is simmular to myspace. So my question is: How do I add in text up the top in the border that is 15xp?

Thank you.

with border: 1px solid #FFFFFF; in css
i got border only around the table
I want the border to surround every cell of the table
as it is with
<table border="1" bordercolor="#FFFFFF" >

how?

I am having two problems with my tables right now:

Within the style sheet, I have the following:

table {
border: thin #0000CC;
}

If I am not mistaken, this should make all tables that have a border of 1 or greater to automatically be thin and blue.

This is not working...

Why not?

D

I have a problem with applying a style for tableborders that is needed at the client I work at.

The client works with IE6 / IE7 only.

In a portlet (JSF) content is loaded into a table that is automatically generated on the basis of CSS.

The "house-style" in this company for using tables is set to the following:

- The outer borders for the table are not visible
- The border under the top-row is orange (#F60)
- The borders under all other rows are grey (#808080)
- The vertical borders are all orange (#F60)

An example of what I mean is seen here (sketch from MS paint, poor quality and wrong colors!!!) :

URL

Anyone with suggestions on how to tackle this?

I have found one solution that seems to work, but as soon as I change it (size, nr of rows etc) the right border shows again. I do not fully understand the code and there are no comments added. See below:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<title>Table with css</title> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<style type="text/css"> 
html,body{text-align:center;} 

* {margin:0;padding:0;} 

html{font-size: 75%;} 

body{background:#ccccff;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla caption,.tbla,.tbla th,.tbla td{ 
border-color:#0099cc; 
border-style:solid; 
font-size:1em; 
} 
.tbla{border-collapse:collapse;} 

.tbla th,.tbla td{padding:.5em;} 

.tbla caption{background:#9999ff;border-width:1px 1px 0 1px;font-weight:600;padding-top:.7em;padding-bottom:.3em;} 

.tbla th{text-align:center;font-weight:600;font-style:italic;} 

.tbla{border-width:1px 0 1px 1px;width:100%;} 
.tbla td{border-width:1px 1px 0 0;font-style:normal;} 
.tbla th{border-width:0px 1px 0 0;color:#000000;font-family:Verdana, Geneva, Arial, Helvetica, sans-serif;} 

.tbla col{width:33.3%;} 
.tbla .a{background:#ffccff;text-align:right;} 
.tbla .b{background:#99ccff;text-align:left;} 
.tbla .c{background:#ccffff;text-align:center;color:#ff0000;font-family:"Comic Sans MS", sans-serif;} 

head+body .tbla tr td {background:#ffccff;text-align:right;} 
head+body .tbla tr td + td {background:#99ccff;text-align:left;} 
head+body .tbla tr td + td + td {background:#ccffff;text-align:center;color:#ff0000;font-family: "Comic Sans MS", Geneva, sans-serif;} 

.x{width:64em;margin:1em auto;} 

.tbla th:first-letter {color:#fe7807;} 
.tbla th{text-transform:capitalize;} 

</style> 
</head> 
<body> 

<div class="x"> 

<table cellspacing="0" summary="aa" class="tbla"> 
<caption>table</caption> 
<col class="a" /><col class="b" /><col class="c" /> 
<thead> 
<tr> 
<th>one</th> 
<th>two</th> 
<th>three</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one x</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
  <td>one</td> 
<td>two</td> 
<td>three</td> 
</tr> 
<tr> 
<td>FF needs a Div to center ?</td> 
<td>it detaches the </td> 
<td>caption ?</td> 
</tr> 
</tbody> 
</table> 

</div> 

</body> 
</html>

I'm having some issues with getting a table border to appear in both Mozilla and IE. I had it working at one point but now it's stopped working in IE.

Basicly this is the code to control it:

border:1px solid #0;

but IE doesn't read it, I've checked the rest of the CSS to see if there is any conflicts but found none.

Anyone know how to get the table border to appear in both IE and Mozilla?

using css i've got a table in a div: e.g.

div
padding: 20px

table
width: 540px
border: 10px solid red;

result: the div including it's own padding should be 600px wide but using the html strict dtd ie is in strict mode (confirmed by other measurements) the whole width of the table is 540px including the borders. also setting box-sizing to contents . thoughts?

Hi

I'm sure this is an easy one, but I can't figure out how to create a table style sheet that does exactly what the following html does

Code:

<table width="100" border="0" cellspacing="0" cellpadding="0" bgcolor="blue">
	<tr>
		<td bgcolor="yellow"></td>
	</tr>
</table>

I tried many different variations using the table-specific keys documented here but am unable to achieve the above effect.

What's happening is that the yellow background of the "td.outlineCollapsed" style (below) has a 1 pixel inset on all sides from the edges of the "table.outlineBase" style box. With the html, by contrast, the yellow background of the <td> exactly overlaps the blue background of the containing table. The exact overlap is what I'm trying to acheive.

Could someone take a look and tell me what I'm doing wrong?

Thanks

Ken

Here's the css:
Code:

table.outlineBase {
	background-color: #888888;
	width: 100%;
	height: 20px;
	/* 
	tried all of the following in many 
	different combinations. Nothing worked. 
	
	border-style: hidden;
	border-collapse: collapse;
	border-spacing: 0px;
	border: outset 0px;
	border-spacing: 0px;
	border: inset 0px;
	*/
	}

table.outlineBase:hover {
	cursor: pointer;
	}

td.outlineCollapsed {
	background-color: yellow;
	width: 25px;
	height: 20px;
	}

Hi,

I'm trying to make a table that will hold a bunch of thumbnail images - three columns and however many rows are necessary. I would like this table to have a border on of the cells EXCEPT for any border on the outside of the table, so it should look like this:


Code:

     |          | 
----------------------
     |          |
----------------------
     |          |

Is there some nice little CSS code that will do this for me? I know that I can set the top right box's left and top border to 0, top right box's right and top border to 0 etc but I will be generating the table dynamically so it makes it harder to do the bottom three cells (still possible though, so I'll do it if I have to).

Thanks