Removing a tr having all td's with border making issues to other tr in mozilla

Question

I have a table having id agenda_tbl which is in the form of ajax response. The row of this table are created from while loop.

<table id="agenda_tbl">
<thead>......</thead>
<tbody>
  <tr>
     <td>Data1</td>
     <td>Data2</td>
     <td>Data3</td>
     <td>Data3</td>
     <td><input type="button" class="approve_btn"</td>
 </tr>
 <tr>
  .........
 </tr>
</table>

CSS for the above table

#agenda_tbl
{
margin-top:5px;
border-collapse: collapse;
font-size: 12px;
}
#agenda_tbl td
{
border:1px solid black;
padding:3px;
 }

I have written click event for the button in the first page.When I click the button,I need to hide the current row completely.I have done this with following jquery.

$(document).on('click','.approve_btn',function(e)
{
    var element = $(this);
    if(confirm('Do you approve this agenda?'))
    {
       element.closest('tr').remove();
    //this hides the current row.Also used hide(),made html() of row 
     //to empty.But doesnt work
    }

});

This script works properly for me,but the border for the adjacent rows are missing.I have googled a lot,but couldn't found a solution.

Screen shot1 After clicking approve button of any row,adjacent rows lost their border.

In what browser? I have this fiddle in Chrome not showing your issue: http://jsfiddle.net/mplungjan/4Lubz94u/ — mplungjan, Sep 15 '15 at 13:57
In chrome its working perfectly.lemme update firefox.How to remove the thicker frame?? — Techy, Sep 15 '15 at 14:00
http://stackoverflow.com/questions/1035706/firefox-1-pixel-bug-with-border-collapse-workaround — mplungjan, Sep 15 '15 at 14:05

mplungjan · Accepted Answer · 2015-09-15T16:47:02.733

0

Try this. I know the border is thicker but it seems to have solved the known FX 1px row bug - at least in Fx 31 which is what I have here

DEMO

#agenda_tbl {
    margin-top:5px;
    border-spacing: 0; 
/* when removing the following line, 
   the lines may be thick but it works in OSX FX 40.0.3  
   even with 1px border */
    border-collapse: collapse; 
    font-size: 12px;
}
#agenda_tbl td {
    padding:3px;
    border:2px solid black;
}

edited Sep 15 '15 at 16:47

answered Sep 15 '15 at 14:08

mplungjan

169,008
28
173
236

This is not working for me in mozilla 40.0..0.Its working in chrome perfectly – Techy Sep 15 '15 at 14:11
Weird. Then I am sorry. – mplungjan Sep 15 '15 at 14:12
WHen I removed border-collapse,its working in mozilla also.But the border is thick – Techy Sep 15 '15 at 14:23
1

Right... Sorry. Vote for the bug to be fixed – mplungjan Sep 15 '15 at 14:28

Removing a tr having all td's with border making issues to other tr in mozilla

1 Answers1