My Wordpress page will not display table borders

by 7 replies
9
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>
#website design #borders #display #page #table #wordpress
  • Please post a links. Can't trouble shoot without seeing the page.
    • [ 1 ] Thanks
  • Here ya go.

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

    Example Featured Listing
  • 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;
    }
    • [ 1 ] Thanks
    • [1] reply
    • <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?
      • [1] reply
  • 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=""
  • I think I understand what you're saying. I'll give it a shot.
Join the discussion

Next Topics on Trending Feed