Member Avatar for rwhenning

I have a form with a table inside a fieldset.
I want to control the background color of the embedded table, which is a 2 x 3.
I've tried all the fixes I could find on this site and none of them worked.
Specifically,

<style type="text/css">
  .txt {color: darkred; background-color: lightgray;} - this works for a cell
  .table1 {background-color: lightgray;} - this doesn't work for the table
    </style>

<style type="text/css">    
  table{background-color: lightgray;} - this doesn't work for the table
    </style>

I've tried these in a CSS file and as shown above, neither works.

HELP!

Thanks.

Edited by Nick Evan because: Fixed formatting
  • 2 Contributors
  • 3 Replies
  • 113 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by $urya

Dani AI

Generated

As reported, cell-level styling showed the gray background while a table-level rule did not. That behavior is commonly caused by cascade/specificity or by painting order: cell backgrounds are painted on top of the table background, so an opaque td or tr rule will hide a table-level color. Framework CSS (Bootstrap or a reset) or a later stylesheet can also override a simple table { … } rule.

A practical diagnostic sequence: open the browser inspector (F12) and check the computed background-color for the table, each tr and td. The inspector shows which stylesheet and selector set each value and whether an !important or inline style is winning. Confirm the custom stylesheet is loaded after any framework CSS. See MDN for details on background-color and using the page inspector: background-color on MDN and Page Inspector.

Common solutions that avoid fragile overrides:

  • Apply the background to the cells (td/th) instead of relying on the table element, or explicitly make cells transparent so the table background shows through.
  • Increase selector specificity so the rule outranks framework rules.
  • Remove spacing (use border-collapse or set cellspacing to 0) if a continuous table background is expected.

Example CSS patterns (minimal, new examples):

table.mytable td { background-color: #eee; }

or to let the table show through:

table.mytable td { background-color: transparent; }

If Bootstrap is present, check its table rules and striped-row rules since they can be quite specific (Bootstrap tables). Use !important only as a last-resort test; a small isolated test page (table plus the minimal CSS) usually reveals whether the problem is markup, cascade order, or a framework override.

Recommended Answers

All 3 Replies

Member Avatar for $urya

Hi there,

Tables background color can be assigned by code as shown below:

<HTML> 
<HEAD> 
<TITLE> Table Background</TITLE> 
<style type="text/css"> 
.tablecolor
{
background-color:lightgrey;
border:1px solid grey;
}
.rowcolor
{
background-color:#ABABAB;
border:1px solid black;
}
BODY { TEXT-DECORATION: none; 
    font-family:verdana; 
    font-size: 9pt; 
    text-indent: 20px; 
} 
</style> 
</HEAD> 
<BODY> 
<center> 
<br><br> 
<table class="tablecolor">
<tr class="rowcolor">
<td>Row1,Column1 </td>
<td>Row1,Column2</td>
<td>Row1,Column3</td>
</tr>
<tr class="rowcolor">
<td>Row2,Column1</td>
<td>Row2,Column2</td>
<td>Row2,Column3</td>
<tr>
</center> 
</BODY> 
</HTML>

I think it might help you in clearing your doubt.

Regards
Surya

Member Avatar for rwhenning

Surya,

Thanks for your reply. It was very helpful.

Rick.

Member Avatar for $urya

Your welcome Rick. It's my pleasure if you find it helpful.

Regards
Surya

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.