We have an html table inside a div container that is sized a certain way, based on the css associated with the div.  The rows are readonly.

On each row, we have an Edit and Save button defined, with JQuery.  Both the Edit and Save are working fine.

The problem is, that the table width and the individual column widths in the Inline Edit row, lie outside the boundaries of the original table.

Original Row:

Inline Edit Row :

The original table is defined here, in the php:

[CODE]

<?php

//...

$service_table = '<table id = " service" class = "service_application" width = "100%" border="1">

                                                        <tr>

                                                            <th>First Header</th>

                                                            <th>Second</th>

                                                            <th>Third</th>

                                                            <th>Fourth</th>

                                                            <th>Fifth</th>

                                                            <th>Sixth</th>

                                                            <th>Seventh</th>

                                                            <th>Eigth</th>

                                                            <th>Action</th>

                                                        </tr>'.

                                                        $_SESSION['service_table'].'

                                                </table><br>';

?>

[/CODE]

, and the Edit button changes the fields to Editable, and sets up the Row display:

[CODE]

// External js document

$(document).ready(function(){

    edit=0;

    $(".edit").click(function(){

            if(edit==0){

//          alert("Edit the record");

            $(this).closest('tr').find('.save').prop("disabled", false); //make save available

            $(this).closest('tr').find('td').not(':last').each (function() {

                    $(this).attr("contenteditable","true");//function to make the table editable

                    $(this).attr("bgcolor","yellow");

                }); 

            $(this).closest('tr').find('td:eq(0)').focus();

   

            if($(this).closest('table').attr('id')=="service")               {   

 

                    var inline_first = $(this).closest('tr').find('td').eq(0).html();

                    var inline_second = $(this).closest('tr').find('td').eq(1).html();

                    var inline_third = $(this).closest('tr').find('td').eq(2).html();

                // etc..

                    $(this).closest('tr').find('td').eq(0).empty();

                    $(this).closest('tr').find('td').eq(1).empty();

                    $(this).closest('tr').find('td').eq(2).empty();

                // etc..

                    $(this).closest('tr').find('td').eq(0).attr("contenteditable","false");

                    $(this).closest('tr').find('td').eq(1).attr("contenteditable","false");

                    $(this).closest('tr').find('td').eq(2).attr("contenteditable","false");

                // etc..

 

                    $(this).closest('tr').find('td').eq(0).prepend(" <input id=id_inline_first type='text' /> ");   

                    $(this).closest('tr').find('td').eq(1).prepend(" <input id=id_inline_second type='text' /> ") ;   

                    $(this).closest('tr').find('td').eq(2).prepend(" <input id=id_inline_third type='text' /> ");   

                // etc…

[/CODE]

Assuming we want to use straight JQuery and not an extension, should we be coding it differently? (I'm just modifying existing code from a prior developer)  Either way, how can we guarantee that a Jquery-modified Dom will retain the original CSS properties of the existing div container?  We're only modifying that specific table, not the div.

A related question:  We tried View Source from the Browser, both from the original form, and also the Inline Form.  But they are identical, so we can't do a comparison, before & after.  Is there some kind of refresh or setting we can use, so that View Source will reflect the JQuery modifications?  That would at least give us a clue.