The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS [Solved] Problem with table border

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #191727

    Hello Guys!

    Will really appreciate if someone could help me… It might be a dumb question – I’m very new in code/css stuff.
    In fact I’m trying to customise the view of Joomla plugin (weather forecast), and got stuck with the table borders. Here is the link:

    As you can see the right border is not appeared for some reason. I made it thick on purpose to see the problem.

    Here is the code fragment:

    /* TABLE-UI /
    —————————————– */
    .nordui-table {margin:15px 0 15px 0;padding:0px;background: #ffffff; border: solid thick #3EC3D9 !important;}
    .nordui-table-header {font-family: Clear_sans_lightregular;height:28px;border: solid 1px #3EC3D9 !important; background: linear-gradient(to bottom, #42CEE6, #37ACBF) !important; padding:5px;text-align:center;font-weight:bold;font-size:12px; color: #fff;}
    .nordui-table-header-b {font-family:Clear_sans_lightregular;height:28px;border-style:solid;border-width: 0px 0px 0px 0px;border-color:#3EC3D9;background-color:#fff;padding:5px;text-align:center;font-weight:bold;font-size:11px;color: #277bab;}
    .nordui-table-subheader {height:28px;background-color:#fff; border-style:solid;border-width: 1px; border-color:#3EC3D9;color:#4a4a4a;font-size:11px;}
    .nordui-table-a {background: #fafafa;}
    .nordui-table-b {background: #ffffff;}
    .nordui-table-a:hover, .nordui-table-b:hover {background: rgba(62, 195, 217, 0.4);}
    .nordui-table-td {padding:5px;font-size:11px;}
    .nordui-table-td-left {padding:5px;border-left:solid 1px;border-color:#88BCCE;font-size:11px;}
    .nordui-table-td-right {padding:5px;border-right:solid 1px;border-color:;font-size:11px;}
    .nordui-table-td-top {padding:5px;border-top:solid 1px;border-color:#88BCCE;font-size:11px;}
    .nordui-table-td span {text-align:left;float:left; }
    .yr-right {text-align:right;float:right;}
    .yr-button {float:left;margin-right:20px;}

    Any advices will be very appreciated!


    Oh… just checked and found out that the problem appears only in Safari and Chrome (using Mac), in Firefox it looks ok..

    Here is the screenshot:



    Thank you!

    Searched more in that direction and found out that it’s known Webkit bug:

    Finally just defined the left/right border for the first/last cell in a row – that worked for my case.

    Thanks a lot for your help

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.