Anirudh Lakshmeesh Anirudh Lakshmeesh - 3 months ago 8
HTML Question

Table Outer Body only in HTML

I want to display only table outer border when that option is clicked. The code is implemented using extjs and html. Border attribute has 2 values 1 and 0 which shows the borders or hides it. How can i implement it for outer borders.

This is the function to generate table.

generateHtmlTable = function (cols, rows, border) {
//Create Table
var tdWidth = 100 / cols;
var classN;
//break-word only for IE
//Set the classes for each type of table
if(border==1){
classN = "table1";
} else {
classN = "table0";
}
var tempborder = "box";
var table = "<table bgColor=white border='"+border+"' width='100%' style=\"table-layout:auto word-wrap: break-word;\" class=\"" + classN +"\" cellpadding=0 cellspacing=0>";
for (var i = 0; i< parseInt(rows); i++) {
table += "<tr>";
for (var j = 0; j < parseInt(cols); j++) {
table += "<td class=\"" + classN +"\" width='" + tdWidth +"%' valign=\"top\">&nbsp;</td>";
}
table += "</tr>";
}
table += "</table>";
return table;


}

This is the function to set borders.

setOutBorder: function(edt){
var rng = edt.getDoc().getSelection().anchorNode;
if (tables.validNode(rng)) {
tables.init(edt);
for(var i = 0; i < tbody.childNodes.length; i++){
for(var j = 0; j < tbody.childNodes[i].childNodes.length; j++){
tbody.childNodes[i].childNodes[j].className = "table0";
}
}
table.className = "tableOut";
table.border = 0;
//rng.select();
}
tables.refresh(edt);
}

Answer

add a inline style to the table where you are generating the table

var table = "<table bgColor=white border='"+border+"' width='100%' style=\"table-layout:auto word-wrap: break-word;\" class=\"" + classN +"\" cellpadding=0 cellspacing=0>";

.table{table-layout:fixed;WORD-WRAP: break-word;}
.table0 {border: #d3d3d3 1px dotted; font-size:9pt; important!}
.table1 {border: solid 1px black; font-size:9pt; important!}