Question

UPDATE: Edited javascript code. It’s only slightly off now in some columns. Maybe a pixel or two. Not sure why.

I need to get the border and internal padding width of a cell of a table. I plan to subtract these values from the offsetWidth to get the content width, and use that to set the style.width of another cell. Unfortunately, I can’t find a tried-and-true way to get the border and padding width. Anyone got an idea?

UPDATE: I added the code below to show my implementation. It still doesn’t align correctly.
I’m attempting to sync up column widths of the two tables; however, the table widths are setting smaller than the length of all the columns, pushing some columns to not line up.
The table widths are setting too small. 🙁

/*
Utilities.js
Author: Steven T. Norris     Created: 3/2/2012
Updated By:                  Last Updated:
Copyright 2012

Utility functions
Logs to debug window if using Debug.aspx or a logger named 'debug' with the HtmlLoggerControlInstance
*/

/*
Syncs column sizes between two tables. 

@param string table1 : First table to sync
@param int table1HeadRow : Row to use as column width sync for table1 (if null, uses first row)
@param string table2 : Second table to sync
@param int table2HeadRow : Row to use as column width sync for table2 (if null, uses first row)
*/
function syncColumnWidths(table1, table1HeadRow, table2, table2HeadRow) {
    var tableTotal = 0;
    var tableAdd = 0;
    var t1width = 0;
    var t2width = 0;
    var t1Cell;
    var t2Cell;
    var t1CellWidth;
    var t2CellWidth;
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths-")
    if((typeof table1 == "string" ||table1.constructor == String) && (typeof table2 == "string" ||table2.constructor == String)
        && (typeof table1HeadRow == "number" || table1HeadRow == null) && (typeof table2HeadRow == "number" || table1HeadRow == null)){
        tableOne = document.getElementById(table1);
        tableTwo = document.getElementById(table2);

        //Set row to check and get row
        if(table1HeadRow == null){
            t1Start = 0;
        }
        else{
            t1Start = table1HeadRow;
        }
        if(table2HeadRow == null){
            t2Start = 0;
        }
        else{
            t2Start = table2HeadRow;
        }
        t1Row = tableOne.rows[t1Start];
        t2Row = tableTwo.rows[t2Start];

        //Get end number
        if(t1Row.cells.length < t2Row.cells.length){
            tEnd = t1Row.cells.length;
        }
        else{
            tEnd = t2Row.cells.length;
        }


        //Sync widths
        for (i = 0; i < tEnd; i++) {
            t1Cell = $("#" + table1+" tr:eq("+t1Start+") td:eq("+i+")");
            t1width = t1Cell.width() + parseInt(t1Cell.css("padding-left"), 10) + parseInt(t1Cell.css("padding-right"), 10)
                      + parseInt(t1Cell.css("borderLeftWidth"), 10) + parseInt(t1Cell.css("borderRightWidth"), 10) ;
            t1CellWidth = t1Cell.width();
            t2Cell = $("#" + table2 + " tr:eq(" + t1Start + ") td:eq(" + i + ")");
            t2width = t2Cell.width() + parseInt(t2Cell.css("padding-left"), 10) + parseInt(t2Cell.css("padding-right"), 10)
                      + parseInt(t2Cell.css("borderLeftWidth"), 10) + parseInt(t2Cell.css("borderRightWidth"), 10);
            t2CellWidth = t2Cell.width();
            UtilLogger.log(HtmlLogger.CONFIG, "syncColumnWidths:t1 width:" + t1CellWidth + "   t2 width:" + t2CellWidth);
            if (t1CellWidth > t2CellWidth) {
                tableAdd = t1width;
                t2Row.cells[i].style.width = t1CellWidth + "px";
                t1Row.cells[i].style.width = t1CellWidth + "px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t2 width to t1");
                UtilLogger.log(HtmlLogger.FINER, "syncColumnwidths:t1 style width:" + t1Row.cells[i].style.width + "    t2 style width:" + t2Row.cells[i].style.width);

            }
            else {
                tableAdd = t2width;
                t1Row.cells[i].style.width = t2CellWidth + "px";
                t2Row.cells[i].style.width = t2CellWidth + "px";
                UtilLogger.log(HtmlLogger.FINE,"syncColumnWidths:setting t1 width to t2");
                UtilLogger.log(HtmlLogger.FINER,"syncColumnwidths:t1 style width:"+t1Row.cells[i].style.width+"    t2 style width:"+t2Row.cells[i].style.width);

            }
            tableTotal = tableTotal + tableAdd;
        }
        UtilLogger.log(HtmlLogger.FINE, "setting main table width to " + tableTotal);
        tableOne.style.width = tableTotal + "px"
        tableTwo.style.width = tableTotal + "px"
        UtilLogger.log(HtmlLogger.FINER, "tableOne width: " + tableOne.style.width);
        UtilLogger.log(HtmlLogger.FINER, "tableTwo width: " + tableTwo.style.width);

    }
    else{
        alert("syncColumnWidths takes parameters (string, int|null, string, int|null)");
    }
    UtilLogger.log(HtmlLogger.INFO,"-Syncing Column Widths Complete-");
}

Answer 1

Try this:

var theDiv = $("#theDiv");
var totalWidth = theDiv.width();
totalWidth += parseInt(theDiv.css("padding-left"), 10) + parseInt(theDiv.css("padding-right"), 10); //Total Padding Width
totalWidth += parseInt(theDiv.css("margin-left"), 10) + parseInt(theDiv.css("margin-right"), 10); //Total Margin Width
totalWidth += parseInt(theDiv.css("borderLeftWidth"), 10) + parseInt(theDiv.css("borderRightWidth"), 10); //Total Border Width

Borrowed from this answer.