My Wordpress page will not display table borders

by Dave O
7 replies
  • WEB DESIGN
  • |
I'm using Advanced TinyMCE plugin to build a table in one of my business directory listings.

Here are screenshots of my Visual and Text editor as well as final web page view.

I've tried multiple browsers and devices. I've also tried multiple postings on my Wordpress page.

Attachment 22910

Attachment 22911

And how it looks when loading the page in a web browser

Attachment 22912

I don't understand. While writing my page the borders were working perfectly fine. Something happened that caused my borders to no longer display and it is driving me nuts.

Since the attachment is so small here's the code I'm using for my table

Use tables to organize information any way you like. You can even change colors to match your own business website.
<table style="border-color: #000000; height: 124px; background-color: #b3c4c9;" border="5" width="360">
<tbody>
<tr>
<td> Make</td>
<td>Model</td>
<td>Price</td>
</tr>
<tr>
<td>Glock</td>
<td>G17 Gen 3</td>
<td>$399</td>
</tr>
<tr>
<td>Ruger</td>
<td>10/22 Target</td>
<td>$299</td>
</tr>
<tr>
<td>S&amp;W</td>
<td>Model 686</td>
<td>$599</td>
</tr>
</tbody>
</table>
#borders #display #page #table #wordpress
  • Please post a links. Can't trouble shoot without seeing the page.
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10173719].message }}
  • Profile picture of the author Dave O
    Here ya go.

    Notice that the only thing that carries over is the row and column setup and the background color.

    Example Featured Listing
    {{ DiscussionBoard.errors[10174055].message }}
  • You didn't define your border thickness in the style. The way it is defined is deprecated and should be done with css. You have an inline style so try this in the inline style and change the color and width to what you want.

    border: 2px solid black;

    If you can't access the inline style for whatever reason, put this in your stylesheet.

    table {
    border-collapse: collapse;
    }

    table, th, td {
    border: 2px solid black !important;
    }

    !important will override the inline border style.
    border-collapse sets whether the table borders are collapsed into a single border or separated. Prevents 2 borders in the same area basically.

    Note: This last method will apply to all tables on your site

    You may want to add a little padding to keep the text off the borders.
    Put this in your stylesheet and adjust the space to your liking

    td{
    padding:3px;
    }
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10174191].message }}
    • Profile picture of the author Dave O
      Originally Posted by totalprocessing.net View Post

      You didn't define your border thickness in the style. The way it is defined is deprecated and should be done with css. You have an inline style so try this in the inline style and change the color and width to what you want.

      border: 2px solid black;

      ...
      <table style="border-color: #000000; height: 124px; background-color: #b3c4c9;" border="5" width="360">

      Doesn't that define the border thickness in style?

      That first suggestion worked fine. The problem now though is that TinyMCE doesn't do that by default. I have to do it by hand. I'd rather things be easier for the users.

      How can I fix that? Do I have to modify the style files?
      {{ DiscussionBoard.errors[10174217].message }}
      • Originally Posted by Dave O View Post

        That first suggestion worked fine. The problem now though is that TinyMCE doesn't do that by default. I have to do it by hand. I'd rather things be easier for the users.

        How can I fix that? Do I have to modify the style files?
        Remove the inline style altogether and put the second method in your child stylesheet.css. It will be automatic then. remove the deprecated stuff too. just leave <table>

        If you remove the inline style and add the 2nd example to the child stylesheet.css, don't add !important. There will be no need for it.

        Your theme may have custom css in appearance>custom css. You won't need a child stylesheet if you have that. There is a plugin for that too. it is called simple custom css

        It will be the last css file to load so your styles will apply
        Signature
        Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
        {{ DiscussionBoard.errors[10174229].message }}
  • border="5" width="360"

    Nope it sure doesn't. Like I said; that method is deprecated. Doesn't work anymore. The border definition needs to be contained within style=""
    Signature
    Premium WooCommerce & WordPress Plugins $10/ea. or FREE With Membership. PluginForage.com
    {{ DiscussionBoard.errors[10174228].message }}
  • Profile picture of the author Dave O
    I think I understand what you're saying. I'll give it a shot.
    {{ DiscussionBoard.errors[10174682].message }}

Trending Topics