Wordpress Tables Different In Chrome

i wanted to get rid of all the space that you get from text widgets at the bottom since i have more than 1 on my blogs. so i made tables in the sidebar template, got my sites looking alot nicer than the wordpress default with widgets

but they all show up different in chrome, ill post one at a time

this is the way its supposed to look, in firefox or pale moon



this is the way it shows up in chrome or safari

    <style>
    .floating-box {
        display: inline-block;
    }
    </style>
    <div class="floating-box" style="padding-left: 17px;">
    <div class="fb-like" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>
    <div id="fb-root"></div>
    <script >(function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=1418206975108700&version=v2.0";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));</script>

    </div>
    <div class="floating-box" style="padding-top: 9px;">

    <a href="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&amp;hosted_button_id=W2LKV3FLF87AQ"><img src="http://i709.photobucket.com/albums/ww95/tunescool/btn_donate_LG.gif"></a>

    </div>


    <table style="font-family: Georgia;">
    <tbody>
    <tr>
    <td style="padding-left: 17px;" colspan="3">

    <a href="https://twitter.com/thenotablenook" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/tw.png"></a>
    <a style="margin-left: 7px;"href="https://www.facebook.com/groups/1675723939406562" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/fb.png"></a>
    <a style="margin-left: 7px;"href="https://www.pinterest.com/tunescool/" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/p.png"></a>
    <a style="margin-left: 7px;"href="https://www.youtube.com/channel/UCahrME4IUpOxj-u5yZOv-Gw/videos" target="_blank"><img src="http://i709.photobucket.com/albums/ww95/tunescool/nook/YTube.png"></a>

    </td>
    </tr>
    <tr>
    <td style="padding-left: 7px; padding-right: 7px;">

    <center><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <!-- All Ads 3 -->
    <ins class="adsbygoogle" style="display: inline-block; width: 300px; height: 60px;" data-ad-client="ca-pub-2495074407921808" data-ad-slot="8350786373"></ins>
    <script>
    (adsbygoogle = window.adsbygoogle || []).push({});
    </script></center>

    </td>
    </tr>
    <tr>
    <td style="padding-left: 7px; padding-right: 7px; color: #000000; border-top: 1px solid black; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3">

    Some Of The Vendors Have Discontinued E&amp;J Or The Row, The Pages Will Update Soon With New Products<br/><br/>

    Nirvana Is Available<br/><br/>

    Sometime Soon More Products Are Going To Be Available, Everything About The Store Is Changing And Will Be Different

    </td>
    </tr>
    <tr>
    <td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">Elizabeth &amp; James</td>
    </tr>
    <tr>
    <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>
    </tr>
    <tr>
    <td style="width: 35%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/bags">Bags</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/shades">Sunglasses</a></td>
    <td style="width: 35%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/necklaces">Necklaces</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/earrings">Earrings</a></td>
    <td style="width: 30%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/bracelets">Bracelets</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rings">Rings</a></td>
    </tr>
    <tr>
    <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Nirvana</td>
    </tr>
    <tr>
    <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/fragrance">Fragrance</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/bodyoil">Body Oil</a></td>
    <td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="2"><a style="color: #00138e;" href="http://olsenfashionnook.com/dryshampoo">Dry Shampoo</a></td>
    </tr>
    <tr>
    <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>
    </tr>
    <tr>
    <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/skirts">Skirts</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/dresses">Dresses</a></td>
    <td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/pants">Pants</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/jeans">Jeans</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/shorts">Shorts</a></td>
    <td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/tops">Tops</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/coats">Coats</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/blazers">Blazers</a></td>
    </tr>
    <tr>
    <td style="padding-left: 15px; color: #000000; border-top: 1px solid black; font-size: 20px; font-weight: bold; font-style: italic;" colspan="3">The Row</td>
    </tr>
    <tr>
    <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Accessories</td>
    </tr>
    <tr>
    <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowbags">Bags</a></td>
    <td style="width: 75%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowsunglasses">Sunglasses</a></td>
    </tr>
    <tr>
    <td style="color: #808080; border-top: 1px solid black; padding-left: 30px; font-size: 14px; font-weight: bold; font-style: italic;" colspan="3">Clothes</td>
    </tr>
    <tr>
    <td style="width: 25%; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowskirts">Skirts</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowdresses">Dresses</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowpants">Pants</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowjeans">Jeans</a></td>
    <td style="width: 30%; padding-left: 15px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowtops">Tops</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowblouses">Blouses</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowsweaters">Sweaters</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowleggings">Leggings</a></td>
    <td style="width: 45%; padding-right: 71px; font-size: 12px; font-weight: bold; font-style: italic;"><a style="color: #00138e;" href="http://olsenfashionnook.com/rowcoats">Coats</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowjackets">Jackets</a><br/>
    <a style="color: #00138e;" href="http://olsenfashionnook.com/rowblazers">Blazers</a></td>
    </tr>
    <tr>
    <td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="http://shrsl.com/?h98n" target="_blank" rel="noopener">Home Living Style – Home Furniture</a></td>
    </tr>
    <tr>
    <td style="width: 100%; border-top: 1px solid black; padding-left: 7px; font-size: 12px; font-weight: bold; font-style: italic;" colspan="3"><a style="color: #00138e;" href="http://nookfragrance.com" target="_blank" rel="noopener">Women's Fragrance Blog/Store</a><br/>
    <a style="color: #00138e;" href="http://thenotablenook.com" target="_blank" rel="noopener">The Notable Nook/A General Forum</a><br/>
    <a style="color: #00138e;" href="http://celebritynook.net" target="_blank" rel="noopener">Celebrity Pic Forum</a><br/>
    <a style="color: #00138e;" href="http://www.nookmoviepreview.com" target="_blank" rel="noopener">Movie Preview Site</a><br/>
    <a style="color: #00138e;" href="http://www.nookselfimprove.net" target="_blank" rel="noopener">Self Improvement Blog</a><br/>
    <a style="color: #00138e;" href="http://mandatoryblogseo.com" target="">Mandatory Blog SEO</a>
    </td>
    </tr>
    <tr>
    <td style="padding-left: 7px; font-size: 12px; font-weight: bold; color: #808080;" colspan="3">

    <iframe style="border: 2px solid #a8830a; border-radius: 10px;" src="//www.dailymotion.com/embed/video/x52tafa" width="300" height="169" frameborder="0" allowfullscreen=""></iframe>

    Mary Kate And Ashley Olsen<br/>

    Two Of A Kind - First Crush<i> by <a href="http://www.dailymotion.com/corey-preiss1" target="_blank" rel="noopener">corey-preiss1</a></i>

    </td>
    </tr>
    </tbody>
    </table>

Code (markup):

 

Strange.

When I run it on jsfiddle in Chrome, it shows just fine on my end: https://jsfiddle.net/0byke1b7/

Do you also have an external .css? It could be that some wordpress <table> css codes are interfering with your new code. Secondly, I'd try to clear cookies in Chrome to see if they have something to do with that (I assume you've already done that, though).

 

the only other css i have, i think, is some custom stuff in my themes settings

i cleared the cookies, same

 

I just opened the page in Chrome and it looks the same as in Firefox.

Something to consider:
Different browsers are more or less aggressive about shrink wrapping content; absolute position elements, table elements, inline block elements e.g. Used to be a major issue with IE and to a lesser extent in Chrome and Opera. I'm retired now and no longer have IE or Opera on any of my Linux machines. :shrug: I'd expect the table to overflow its container rather than drop down if that's the case

The drop down leads me to wonder if you've changed the display property on the th/td elements, say to inline block?

Another thought: Does this drop-down event happen at all window sizes?

gary

 

the only inline block i have is the facebook and donate buttons

i never said anything about drop-down

but youre saying everything is fine with the tables on your browser

does it work for everyone else

http://olsenfashionnook.com

 

Regardless of whether or not it works - it's not the right way to use HTML - those are not tabular data, and should not be put into tables at all. There are plenty of better way to achieve what you want, tables not being one of them. Those are lists, not tabular data. Hence it should be formatted as a list, and if you want it to wrap nicely, you can use modern techniques like flex-box or similar methods. But it should not be put into tables (also because tables often behave weirdly when screen-sizes differ, and can be unpredictable).

 

That's what your image shows the cells doing.