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-");
}

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-");
}

• javascript
• width
• border
• padding

Share Improve this question Follow edited Mar 23, 2012 at 19:46 steventnorris asked Mar 23, 2012 at 15:32 steventnorrissteventnorris 5,8962323 gold badges9898 silver badges185185 bronze badges 3

• Are you open to using jQuery? – Elliot Bonneville Commented Mar 23, 2012 at 15:34
• @ElliotBonneville everything that you do in jQuery can be done in pure javascript – Nicola Peluchetti Commented Mar 23, 2012 at 15:36
• 1 @ElliotBonneville I am open to using whatever gets the job done. Although javascript can do whatever jQuery can do, seeing as it is javascript itself, jQuery often does it with less hassle and more fun. :) – steventnorris Commented Mar 23, 2012 at 15:39

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

If you have this table

<table>
    <tr>
        <td id="my" style="padding: 5px; border:3px;"></td>
    </tr>
</table>

you can do

 var padding = document.getElementById('my').style.padding;
 var border = document.getElementById('my').style.border;

fiddle here http://jsfiddle/7TmXm/

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.