Table background color missing

  • Resolved elipsett

    (@elipsett)


    10 years ago

    I want to put a light background color in a table.
    I suspect the same problem, whatever it is, is also preventing me from adding color to text.

    There was no background color shown when I coded it manually, so I put the table in Dreamweaver to see what the problem was, and it displays perfectly in DW. Here is the pertinent code:

    <table width="90%" border="1" cellpadding="2">
  <caption>
    Caption for the table
  </caption>
  <tbody>
    <tr>
      <th align="center" valign="middle" bgcolor="#F4BFC0" scope="col">Upper left</th>
      <th align="center" valign="middle" bgcolor="#F4BFC0" scope="col">Upper right</th>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#F4BFC0">Lower left</td>
      <td align="center" valign="middle" bgcolor="#F4BFC0">Lower right</td>
    </tr>
  </tbody>
</table>
Viewing 15 replies - 1 through 15 (of 28 total)
1 2
  • Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Could you please explain where you added code manually where background color not shown.

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    I made this simple table example and verified that the problem persists.

    Each cell is marked with a background color (in this case, a random pink). The table displays with a pink background in DW. When I copy it to a blank page in WP, between BODY tags, it displays in black and white. The entire table.

    The same thing happens if I move it to the initial <table> line, like:
    <table style="background-color:#ffccff">

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    I put it up so you can see it, but will have to delete it again shortly.
    http://www.cadmusmedia.org/wp/just-testing/

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    Sorry, had to make it private again. If someone needs to see it let me know.

    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    May be some default css overwriting your added css ,Please add a “!important” tag like below:
    <table style=”background-color:#ffccff !important”>

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    Thanks, but no cigar.

    No change, whether the !important tag is in the table code, or the cell code.

    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Can you activate below link for 10 min so that I can check
    http://www.cadmusmedia.org/wp/just-testing/

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    With pleasure.

    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Can You send me html code of “Background code for table only” table

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    This is currently running a Mantra child theme, but the child theme only has one entry, which also doesn’t work. Probably for the same reason. See
    https://ww.wp.xz.cn/support/topic/mantra-setting-class-text-colorsize-in-child-theme
    The problem persists even when I switch back to vanilla Mantra.

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    Here’s the whole thing:

    <table width="90%" border="1" cellpadding="2">
  <caption>
    Individual cell background code
  </caption>
  <tbody>
    <tr>
      <th align="center" valign="middle" bgcolor="#F4BFC0" scope="col">Upper left</th>
      <th align="center" valign="middle" bgcolor="#F4BFC0" scope="col">Upper right</th>
    </tr>
    <tr>
      <td align="center" valign="middle" bgcolor="#F4BFC0">Lower left</td>
      <td align="center" valign="middle" bgcolor="#F4BFC0">Lower right</td>
    </tr>
  </tbody>
</table>

<hr />
<table style="background-color:#F4BFC0 !important width="90%" border="1" cellpadding="2">
  <caption>
    Background code for table only
  </caption>
  <tbody>
    <tr>
      <th align="center" valign="middle" scope="col">Upper left</th>
      <th align="center" valign="middle" scope="col">Upper right</th>
    </tr>
    <tr>
      <td align="center" valign="middle">Lower left</td>
      <td align="center" valign="middle">Lower right</td>
    </tr>
  </tbody>
</table>
    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    I have inspected code ,I found wrong html strcture that need to fix.
    Below code is wrongly written need to corrected:
    <table style=”background-color:#F4BFC0 !important width=” 90%”=”” border=”1″ cellpadding=”2″>

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    Sorry, just added the missing ” after backgrouind-color… And published.
    That line now reads:
    <table style="background-color:#F4BFC0 !important" width="90%" border="1" cellpadding="2">

    Clarion Technologies

    (@clarionwpdeveloper)

    10 years ago

    Please Use below code:

    <table width="90%" border="1" cellpadding="2">
  <caption>
    Individual cell background code
  </caption>
  <tbody>
    <tr>
      <th align="center" valign="middle" style="background-color:#F4BFC0 !important" scope="col">Upper left</th>
      <th align="center" valign="middle" style="background-color:#F4BFC0 !important" scope="col">Upper right</th>
    </tr>
    <tr>
      <td align="center" valign="middle" style="background-color:#F4BFC0 !important">Lower left</td>
      <td align="center" valign="middle" style="background-color:#F4BFC0 !important">Lower right</td>
    </tr>
  </tbody>
</table>

<hr />
<table style="background-color:#F4BFC0 !important" width="90%" border="1" cellpadding="2">
  <caption>
    Background code for table only
  </caption>
  <tbody>
    <tr>
      <th align="center" valign="middle" scope="col">Upper left</th>
      <th align="center" valign="middle" scope="col">Upper right</th>
    </tr>
    <tr>
      <td align="center" valign="middle">Lower left</td>
      <td align="center" valign="middle">Lower right</td>
    </tr>
  </tbody>
</table>

    Thread Starter elipsett

    (@elipsett)

    10 years ago

    No change in appearance.

Viewing 15 replies - 1 through 15 (of 28 total)
1 2

The topic ‘Table background color missing’ is closed to new replies.