asked on

Dumb Style Sheet Question - 500 Points!!!

I'm having a problem with my style sheet and I don't know what I'm doing wrong. I have the following defined in the style sheet:

table.main {
width:100%;
border-style:solid;
border-width:thin;
border-color:#013366;
padding: 0 0 0 0;
}

What I want is a style sheet definition to match the following table definition:

<table width="100%" border="1" cellpadding="0" cellspacing="0" bordercolor="#013366">

I attached the style sheet to my htm file and inserted a table using the class="main" so the code looks like:

<table class="main">

When I display the table in my web browser, the table defined with class="main" only shows the border around the outside of the table. It doesn't show the cell borders.

The table defined without the class="name" shows all of the borders.

What am I doing wrong?

radnor

radnor

oh, now I see a little extra spacing top and bottom....

dyarosh

ASKER

I still only get the border around the outside of the table. I don't get the cell lines.

For example: This is what I'm getting:

----------------------------------------------------------------
- row1, col1 row1, col2 -
- -
- row2, col1 row2, col2 -
----------------------------------------------------------------

What I want is this:

----------------------------------------------------------------
- row1, col1 | row1, col2 -
----------------------------------------------------------------
- row2, col1 | row2, col2 -
----------------------------------------------------------------

ASKER CERTIFIED SOLUTION

radnor

membership

This solution is only available to members.

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

Start Free Trial

radnor

td.main {
width: 33%;
border: 1px solid #013366;
padding-right: 30px;
margin: 0px;
}

radnor

td.main {
width:200px;
border: 1px solid #013366;
padding-right: 30px;
margin: 0px;
}

Width above did not do it....

radnor

Did you have a chance to try the example this the CSS above? Will it work for your application?

dyarosh

ASKER

I tried it but now I get the following look:

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

What I want is:
-----------------------------------------------------------------------------------------------------------------
| | | |
| | | |
-----------------------------------------------------------------------------------------------------------------

Any other thoughts?

radnor

The code that follows will produce:
---------------------------------------------------------------------------------------------------------
| 1st TR | | |
| | | |
---------------------------------------------------------------------------------------------------------
| 2nd TR | | |
| | | |
---------------------------------------------------------------------------------------------------------

<html>
<head>
<title>test</title>
<style>
td.main {
width:200px;
border: 1px solid #013366;
padding-right: 30px;
margin: 0px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="main">dddddd</td>
<td class="main">dddddd</td>
<td class="main">dddddd</td>
</tr>
<tr>
<td class="main">dddddd</td>
<td class="main">dddddd</td>
<td class="main">dddddd</td>
</tr>
</table>
</body>
</html>

radnor

Sorry, between the 1st and 2nd TR tags it will produce:
================================================

As the line between TR(s)

dyarosh

ASKER

Using your ideas I was able to come up with the following that gives me almost what I want (close enough):

td.main{
width=200px;
border-right: 1px solid #013366;
border-bottom: 1px solid #013366;
padding-right: 0px;
margin: 0px;
}

Thanks for the help.