Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 146
  • Last Modified:

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?
0
dyarosh
Asked:
dyarosh
  • 8
  • 3
1 Solution
 
radnorCommented:
<style>
table.main {
    width:100%;
    border: 1px solid #013366;
    padding: 0px;
    margin: 0px;
}
</style>
0
 
radnorCommented:
oh, now I see a little extra spacing top and bottom....
0
 
dyaroshAuthor Commented:
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         -
----------------------------------------------------------------
0
Receive 1:1 tech help

Solve your biggest tech problems alongside global tech experts with 1:1 help.

 
radnorCommented:
<html>
<head>
<title>test</title>
<style>
td.main {
    width: 33%;
    border: 1px solid #013366;
    padding: 0px;
    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>
0
 
radnorCommented:
td.main {
    width: 33%;
    border: 1px solid #013366;
    padding-right: 30px;
    margin: 0px;
}
0
 
radnorCommented:
td.main {
    width:200px;
    border: 1px solid #013366;
    padding-right: 30px;
    margin: 0px;
}


Width above did not do it....
0
 
radnorCommented:
Did you have a chance to try the example this the CSS above?  Will it work for your application?
0
 
dyaroshAuthor Commented:
I tried it but now I get the following look:

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

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

Any other thoughts?  
0
 
radnorCommented:
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>
0
 
radnorCommented:
Sorry, between the 1st and 2nd TR tags it will produce:
================================================

As the line between TR(s)
0
 
dyaroshAuthor Commented:
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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now