Move only some CSS styles from one element to another

Question

I've created a jQuery plugin which takes a HTML table, makes it sortable, and fixes the header and footer. See http://jsfiddle.net/aXDzz/ for an example (click create to create the table).

Works good, but then recently needed to add some padding or margin around the table. This caused some problems.

My plugin basically replaces the original <table> with a <div> which contains a <table> for the header, a <div> which intern contains a <table> for the body, and a <table> for the footer. My intent was for the user to apply CSS to the original table, and upon using my plugin, the CSS would appropriately transfer. As stated above, however, I wrap a <div> around the table so that now the margin or padding should be applied to the <div> and not the <table>.

So, looks like I need to move any CSS which applies to the exterior of the <table> to the <div> such as margin, but then leave any CSS which applies to the interior of the <table> such as the row color alone.

How would I do this? Or is there a better way altogether I should be implementing this? Thanks

PS. Please feel free to critique my plugin as it is my first attempt.

@Blazemonger: nowhere does the question say anything about "using a table for layout", and the JSFiddle example provided isn't using a table for layout. It's using a table as a table - and there's nothing wrong with that. — James Donnelly, Mar 15 '13 at 13:17
@Blazemonger. Tabular data. But I want to position the table. — user1032531, Mar 15 '13 at 13:18
@JamesDonnelly Correct. But how would I position the table? (Other than having the user know to position the recently created DIV) — user1032531, Mar 15 '13 at 13:19
@user1032531 could you please define your question again? You are implying the solution, and asking how to do that. I understand the question, but could you ask more directly what are you asking for? Maybe there are other approaches :) Thanks — Aleks, Mar 15 '13 at 13:33
@Aleks. How can I position the newly created table using margin, padding, or absolute/relative positioning without having to manually apply CSS to the recently created DIV? — user1032531, Mar 15 '13 at 13:38
@user1032531 See also the [XY-problem](http://mywiki.wooledge.org/XyProblem) — Ikke, Mar 15 '13 at 13:42
maybe this [SO-question](http://stackoverflow.com/questions/754607/can-jquery-get-all-css-styles-associated-with-an-element) can help. — Jan Hommes, Mar 15 '13 at 13:57
@John. Turns out datatables.net wraps a `
` around the `` and positions the `
`. Not ideal but maybe the best approach. — user1032531, Mar 15 '13 at 14:08
Lkke +1 for xy problem :) newer have read something like that, but encountered few times.. — Aleks, Mar 15 '13 at 15:03
Regarding XY "Or is there a better way altogether I should be implementing this?" — user1032531, Mar 15 '13 at 15:24

Aleks · Answer 1 · 2013-03-15T14:07:57.370

0

I have inspected your code, and I have tried to apply margin to your table:

.myTable {
    width:600px;
    matgin-left: 50px;
}

And I then saw where the problem is. But then I have looked the code, and you are specifying fixed width

<div style="width: 618px; overflow-y: auto; max-height: 300px;"><table id="myTable" class="myTable">

And that seems causes the problem.

Take a look at:

width: 618px;

If I understood the question correctly, this is not calculated good. Maybe you could try to find in your plugin where width is calculated, and then to include margin into count how to calculate width. I haven't find so far. The plugin is long..

When I put , for example 665px, it looks somewhat good..

Maybe that is the solution.

edited Mar 15 '13 at 14:07

answered Mar 15 '13 at 13:49

Aleks

4,866
3
38
69

I can move the margin by using `$(this).css('margin-left')`, and then applying it to the outer `
`. But then, user might have added margin instead of margin-left, so need to do that one. Where does it end...
– user1032531 Mar 15 '13 at 14:12
I understand. I have put margin-left for testing purpose, just to see where it breaks. I am not suggesting that as solution, and to add that to css. I am implying that width is not calculated good, and that why it breaks. At least to my opinion. You could update plugin to calculate width to include margins , paddings etc. – Aleks Mar 15 '13 at 14:20
Thanks Aleks. I think, however, that I either need to modify the plugin, or wrap the table in a div and position the div (however, this two is not ideal since a typical user wouldn't know to do so). – user1032531 Mar 15 '13 at 14:27

score 0 · Accepted Answer · edited May 23 '17 at 11:50

I tried to modify this plugin for your needs:

(function($){
    $.fn.copyStyle = function(jqCopyTo,styleStartsWith,overideStyle){
        var dom = this.get(0);
        var style;
        var returns = {};
        if(window.getComputedStyle){
            var camelize = function(a,b){
                return b.toUpperCase();
            };
            style = window.getComputedStyle(dom, null);
            for(var i = 0, l = style.length; i < l; i++){
                var prop = style[i];
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0)  {
                        var camel = prop.replace(/\-([a-z])/g, camelize);
                        var val = style.getPropertyValue(prop);
                        returns[camel] = val;
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        if(style = dom.currentStyle){
            for(var prop in style){
                for(var m = 0; m < styleStartsWith.length; m++){
                    if(prop.lastIndexOf(styleStartsWith[m], 0) === 0) { 
                        returns[prop] = style[prop];
                        overideStyle==true ? $(this).css(prop,0):null;
                    }
                }
            };
        };
        //copy 
        $(jqCopyTo).css(returns);
        return this;
    }

})(jQuery);

on a structure like this:

#inner {
  margin:20px;
  padding:20px;
  background-color:#F00;
}
#wrapper {
  background-color:#f80;
}

html:

<div id="wrapper">
    <div id="inner">
        Table Content
    </div>
</div>

you can use this plugin like this:

$("#inner").copyStyle("#wrapper",["margin","padding"],true);

the result is that the inner-div margin and padding get overwritten and the style is added to the wrapper-div. you can handle the override behavior with the last Boolean indicator.

here is a full example on jsFiddle. I can't guarantee that it works in all browser (just tested Firefox and ie9)

Thanks Jan, Don't know if I would be better off putting a div around the table, or just adding css which applies to the auto-generated div (which is cryptic but works) or using your solution, but your solution definitely answers my specific questions, so THANKS! — user1032531, Mar 16 '13 at 02:50

Move only some CSS styles from one element to another

2 Answers2