Skip to main content
December 10, 2020
Question

Tables in Tabs have borders I don't want

  • December 10, 2020
  • 1 reply
  • 300 views

We have Dreamweaver  CS5.5 and got it to be able to use tabs on some of our WWW page and it all works fine.  Originally installed on Windows 7 (2011 time frame) but I am running Windows 10 now and Dreamweaver is not even installed since I can do what I need to do on the WWW site with what is out there already.

I have some pages with tabbed displays and when I put a table in the tab it doesn't have table borders around the table but the cells in te tabel have borders and I wish the cells did not have borders.

 

If I put a table on the page that is NOT in a Dreamweaver tab there will be no borders so the problem is only with tables that are in a tab.

 

I'm not proficent in CSS but can follow directions on how to make changes if enough details are provided for a novice like me.

 

To see the issue visit this URL and choose the Hardware tab to see a simple table showing borders in the cells that I would like to get rid of

 

https://www.touchwindow.com/c/EloTemperatureCheckBundle.html

 

Thanks for the ideas.

 

 

 

    This topic has been closed for replies.

    1 reply

    December 10, 2020

    I do know where these files are and recall making some adjustments to them years ago so maybe something can be done here:

     

    SpryTabbedPanels.css
    SpryTabbedPanels.js

    Legend
    December 10, 2020

     

    Look in your pages linked file below:

     

    themes/levels/css/all.php

     

    For the below css selectors and comment /*  */ the border attributes out, as shown in red.

     

    table.con {
    /*border:1px solid #ddd;*/
    }

    .TabbedPanelsContentGroup table tr,
    .con tr {
    /*border-bottom:1px solid #ddd;*/
    }
    .TabbedPanelsContentGroup table tr:last-of-type,
    .con tr:last-of-type {
    /*border-bottom:1px solid transparent;*/
    }
    .TabbedPanelsContentGroup table td,
    .con td {
    /*border-right:1px solid #ddd;*/
    }
    .TabbedPanelsContentGroup table td:last-of-type,
    .con td:last-of-type {
    /*border-right:1px solid transparent;*/
    }

     

     

    Edited.

    If you DO want a horizontal line beltween the table 'sections' then DONT comment out the border on the below selector:

     

    .TabbedPanelsContentGroup table tr,
    .con tr {
    border-bottom:1px solid #ddd;
    }

     

     

    Plus you could add some vertical cell padding and space the text out a bit vertically by add padding and line-height on the selector below:

     

    .TabbedPanelsContentGroup table td,
    .con td {
    /*border-right:1px solid #ddd;*/
    padding: 10px 0;
    line-height: 20px;
    }

    Legend
    December 10, 2020

     

    On second thoughts having just looked at:

    themes/levels/css/all.php

     

    its one of those minified bloated garbage css frameworks which should be burnt in hell - you'll find it a pain to find anything in it and work with it, unless you unminify it first. You're probably best off linking a dedicated css file to your page, which will overide the css in the 'themes/level/css/al.php' file. It must be linked to the page BELOW the 'themes/level/css/al.php' file:

     

    table.con {
    border: none!important;
    }

    .TabbedPanelsContentGroup table tr,
    .con tr {
    border-bottom:1px solid #ddd;
    }
    .TabbedPanelsContentGroup table tr:last-of-type,
    .con tr:last-of-type {
    border: none!important;
    }
    .TabbedPanelsContentGroup table td,
    .con td {
    border: none!important;

    padding: 10px 0;
    line-height: 20px;
    }
    .TabbedPanelsContentGroup table td:last-of-type,
    .con td:last-of-type {
    border: none!important;
    }

     

     

    Now excuse me while I reach for the sick-bag. Frameworks have this adverse effect on me.