17 replies [Last post]
smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

I have this database table that needs to be "sexed up" as they say. I have applied a border="1" to the table for separation purposes and design. But some cells will not have info/content in them - as this is generated due to information. I noticed the cells that do not display info also do not have a border. Even if the cell has a nbsp; it still does not display a border as it should. Does anyone know how to resolve this issue? Thanks for your advise.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Can we see your code?

Can we see your code?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Yes, here is the static html

Yes, here is the static html code for table:


Premises

Open
Items


Date

Description

Billed A/R
Amount

Billed A/R
Balance

Budget Actual
Amount

Budget Actual
Balance

Budget Only
Amount

Budget Only
Balance



 
 
 
 
 
 
 
 
 
 
 


 
 
 
 
 
50.00 CR

35.00

 
 
 
 


 
 
 
 
 
35.00
85.00
 
 
 
 


 
 
 
 
 
50.00
50.00
 
 
 
 


 
 
 
 
 
50.00 CR
0.00
 
 
 
 

Attached is a screenshot so you can see that where there is no content in the cell there is also no border.

AttachmentSize
screenshot.gif 6.25 KB
vinhboy
vinhboy's picture
Offline
Enthusiast
davis, ca
Last seen: 14 years 1 week ago
davis, ca
Joined: 2006-12-21
Posts: 257
Points: 0

not sure what you are trying

not sure what you are trying to do because i never learned tables, but maybe you can define "td" in your style sheets to have width of 9% or something, since most of your cells are 9%.. that way they will always have width and height.

probably wont work, but worth a try.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I copied your HTML and

I copied your HTML and tested it and it seemed to work fine in FF & IE, in other words, didn't look like the screenshot you provided. However, the code does have a lot of cruft in it and would be better like this:

table {
width: 784px;
padding: 2px;
border: 1px solid #CCC;
background: #CCC;
text-align: center;
}
.premises { width: 14% }
.open { width: 6% }
.alert { width: 3% }
.date { width: 5% }
.desc { width: 15% }
.budget { width: 9% }
.billed { background: #F1F4FA }
.actual { background: #FDEED8 }
tr { vertical-align: top }
td { background: #FFF }
th { background: #FFF; color: #666 }



Premises
Open
Items

Date
Description
Billed A/R
Amount
Billed A/R
Balance
Budget Actual
Amount
Budget Actual
Balance
Budget Only
Amount
Budget Only
Balance




 
 
 
 
 
 
 
 
 
 
 


 
 
 
 
 
50.00 CR
35.00
 
 
 
 


 
 
 
 
 
35.00
85.00
 
 
 
 


 
 
 
 
 
50.00
50.00
 
 
 
 


 
 
 
 
 
50.00
0.00
 
 
 
 

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Hi Tyssen, Thanks for the

Hi Tyssen,

Thanks for the info. However, I have multiple tables everywhere with various sizes and functions. Establishing one set of code for a table would really mess up the system. I suppose I could us an id code but then multiple id's may be problematic also. Any thoughts?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

smk2007 wrote:I suppose I

smk2007 wrote:
I suppose I could us an id code but then multiple id's may be problematic also. Any thoughts?

No, it wouldn't be problematic; that's what IDs are for.

When creating IDs though, look to see whether you're going to have more than one table on a single page and whether any of the styles can be combined, e.g. table 1 and table 2 might be the same width and border but have different coloured cells. Give them both a class which holds the styles for widths and borders and then give each one an ID which can be used to target the cells of each table respectively.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks. I work the code

Thanks. I work the code accordingly. I guess my initial problems stems from a 3rd party css with exadel. I think I have may located the right file with the conflict. Thanks again!

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Well -- I'm not having much

Well -- I'm not having much luck with applying the same code as "Tyssen's" using ID's. Can someone show me how it's properly done?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Why don't you show us what

Why don't you show us what you're trying to achieve (rather than us guessing) and then we can show you how to fix it?

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

This code below that you

This code below that you posted at an earlier date. I cannot use table, td, tr, or th's as a universal code so want to convert those (table,tr,td,th's ect) into an ID code to prevent conflict.

table {
width: 784px;
padding: 2px;
border: 1px solid #CCC;
background: #CCC;
text-align: center;
}
.premises { width: 14% }
.open { width: 6% }
.alert { width: 3% }
.date { width: 5% }
.desc { width: 15% }
.budget { width: 9% }
.billed { background: #F1F4FA }
.actual { background: #FDEED8 }
tr { vertical-align: top }
td { background: #FFF }
th { background: #FFF; color: #666 }

Premises
Open
Items

Date
Description
Billed A/R
Amount
Billed A/R
Balance
Budget Actual
Amount
Budget Actual
Balance
Budget Only
Amount
Budget Only
Balance

 
 
 
 
 
 
 
 
 
 
 

 
 
 
 
 
50.00 CR
35.00
 
 
 
 

 
 
 
 
 
35.00
85.00
 
 
 
 

 
 
 
 
 
50.00
50.00
 
 
 
 

 
 
 
 
 
50.00
0.00
 
 
 
 

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 50 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

HTML: <table

HTML:

CSS:

#myTable { width: 784px; padding: 2px; border: 1px solid #CCC; background: #CCC; text-align: center; } #myTable tr { vertical-align: top } #myTable td { background: #FFF } #myTable th { background: #FFF; color: #666 } That's all you have to do.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks Tyssen. I actually

Thanks Tyssen. I actually did do that but it didn't come out right. I'll try once again in a static version. I'm beginning to think the conflict is with a 3rd party file. Thanks for your help!

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

How do I get two background

How do I get two background classes to work properly.

CSS code:

#ledgerTable {
width: 100%;
padding: 1px;
background: #DBD8D8;
text-align: center;}

#ledgerTable tr { vertical-align: middle }
#ledgerTable td { background: #FFF }
#ledgerTable th { background: #FFF; color: #ACA899; font-weight: normal }

.premises { width: 12%; }
.open { width: 5%; }
.iconInfo { width: 4%; }
.date { width: 6%; }
.desc { width: 13%; }
.budget { width: 10% }
.billed { background: #F1F4FA; }
.actual { background: #FDEED8; }

HTML:

Billed A/R
Amount

It's not working for me? I need the colored background #F1F4FA to come through on the th section but it comes out white because of the th background setting...

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

try over specifying the

try over specifying the class ruleset:

th.billed {}

or

#ledgerTable th.billed {}

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks. I couldn't really

Thanks. I couldn't really get it to work that way but I did manage a fix for IE but it doesn't work in FF? The section I am referring to that doesn't render properly is the background colors in the last 6 columns of the table. Can you see what I've done wrong?

CSS:

#ledgerTable { width: 100%; padding: 1px; background: #DBD8D8; text-align: center }

#ledgerTable tr { vertical-align: middle; background: #FFF }
#ledgerTable td { background: inherit }
#ledgerTable th { background: inherit; color: #ACA899; font-weight: normal }

.premises { width: 12%; background:#FFF }
.open { width: 5%; background:#FFF }
.iconInfo { width: 4%; background:#FFF }
.date { width: 6%; background:#FFF }
.desc { width: 13%; background:#FFF }
.budget { width: 10% }
.billed { background: #F1F4FA }
.actual { background: #FDEED8 }
.leftAlign { text-align:left; padding-left:5px }

HTML:

Premises
Open
Items

Date
Description
Billed A/R
Amount
Billed A/R
Balance
Budget Actual
Amount
Budget Actual
Balance
Budget Only
Amount
Budget Only
Balance

<ALL>

<ALL>

 

<ALL>

<ALL>

 
 
 
 
 
 

1780 NW 2nd

 
 
 
Unposted Cash
50.00 CR
35.00
 
 
 
 

1780 NW 2nd
 
 
 
Unposted Cash
35.00
85.00
 
 
 
 

1780 NW 2nd
Open
 
10/01/06
Charge
50.00
50.00
44.46
46.72
50.00
50.00

1780 NW 2nd
Open
 
09/06/06
Payment
50.00 CR
0.00
50.00 CR
2.26
50.00 CR
0.00

1780 NW 2nd
Open
 
09/01/06
Charge
50.00
50.00
60.32
52.26
50.00
50.00

1780 NW 2nd
 
 
08/06/06
Payment
50.00 CR
0.00
50.00 CR
8.06 CR
50.00 CR
0.00

1780 NW 2nd
 
 
08/01/06
Charge
50.00
50.00
47.53
41.94
50.00
50.00

1780 NW 2nd
 
 
07/05/06
Payment
150.00 CR
0.00
150.00 CR
5.59 CR
50.00 CR
0.00

1780 NW 2nd
 
 
07/01/06
Charge
50.00
150.00
44.41
144.41
50.00
50.00

1780 NW 2nd
 
 
06/15/06
Deposit
100.00
100.00
100.00
100.00
 
 

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 7 years 38 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

It's the same principle I

It's the same principle I showed you above but you mentioned only the th element

Your background inherit is the problem and shouldn't be required but IE won't apply a background to the tr, the background applied to the id #ledgerTable along with the td selector is far more specific than your single class declaration and will never overide the id element combo.

You have two choices you can add '!important' to the class declarations (bad idea but works) or you can increase the specificity of the class thusly:

#ledgerTable th.billed, #ledgerTable td.billed { background: #F1F4FA }
#ledgerTable th.actual, #ledgerTable td.actual { background: #FDEED8 }

(N.B you dont really require the th/th but it looks neater)
which is much what I meant in the first reply on this, try it it should work.

Another option that you could try if you have time to spare is seeing if you can make colgroup tags work for you but it's an advanced table element and I doubt IE will work with them.

Hugo.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

smk2007
smk2007's picture
Offline
Enthusiast
Last seen: 11 years 33 weeks ago
Timezone: GMT-8
Joined: 2007-01-04
Posts: 135
Points: 7

Thanks Hugo! This worked

Thanks Hugo! This worked perfect!