I am generating a simple html-table and would like columns of different widths in the same row. However when I try to set the width either with pixels or with %, there is no change in the display. Also, the first column ('td' element) added is always much wider than other columns added later. I have tried setting the width after creating an element and before appending it as a child node as well as setting the width only after appending the element as a child node. Here is an example of what I have tried:
var tr = document.createElement('TR');
tr.style.margin = "50px"
//scoring column
var td0 = document.createElement('TD')
td0.style.padding = '1em'
td0.style.width = '2px'
var tr11 = document.createElement('TR');
tr11.style.margin = "50px"
tr11.innerHTML ="score: " + ascore_array[i + offset];
var tr22 = document.createElement('TR');
tr22.style.margin = "50px"
tr22.innerHTML ="num votes: " + anumVotes_array[i + offset];
td0.appendChild(tr11)
td0.appendChild(tr22)
//answer column
var td1 = document.createElement('TD')
td1.style.padding = "1em"
td1.innerHTML = auser_array[i + offset]
tr.appendChild(td0)
td0.style.width = "20%"
tr.appendChild(td1)
td1.style.width = "30%"
As you can see in the code above, I have tried both px and % as units of width. I have also tried setting the width both before and after setting an element as a child node. There is no change in my code. Also, I am using css templates, but they only set default background colors for my table elements. There is nothing in the css to regular td element sizing. Also I have tried resizing the tr elements within the td elements but this also has no effect.
I am using Chrome as my browser.
What am I doing wrong and how can I fix it?
Ok I think I see what the problem is. There is a <col style="width: 80%;"> and a <col style="width: 20%;"> inbetween the root <table> and <tbody> which is overriding your styles in the <td> below
maybe this can help you
var cell = document.createElement('td');
parent.appendChild(cell);
cell.style.width = '200px';
http://jsfiddle.net/ZvEDn/1/รง
here is the question where i found it
how to set cell width in javascript just after creating it with 'document.createElement()' method?
Related
I have a table cell in which other tables are displayed (with background colors). The inner tables aren't always shown; they can be hidden via a button (change class with jQuery). Now I want the outer cell to always be filled with color. That means if only one table is displayed, its width should be 100%. When two are displayed, each width should be 50%, and so on.
How am I supposed to solve this?
Here's an example:
...
<td>
<table class="show"><tr><td></td></tr></table>
<table class=""><tr><td></td></tr></table>
<table class="show"><tr><td></td></tr></table>
</td>
...
In this case, the width should be 50%
You can change the width value with Jquery.
var count_table = $(".show").length; // count ".show" elements
$(".show").each(function{ // iteration on each ".show"
var width = 100/count_table; // % value of new width
$(this).css("width", width+"%"); // CSS modification
});
This code is just adapted for one TD element. You need to iterate on each "td" too.
(I hope I answered your problem)
To change the width of your elements you can use jquery.
Here's the page explaining how.
Here is another way: http://jsfiddle.net/ypJDz/1
A bit too complicated for what you need, but a great deal of possibility to expand.
function resizeTables() {
var baby = $("td > table.show"),
amount = baby.length,
mother = $("body");
baby.width(function () {
var w = mother.width() / amount;
return w;
});
}
resizeTables();
$("button").click(function () {
var $this = $(this),
ID = $this.index() + 1;
$("td > table:nth-child(" + ID + ")").toggleClass("show");
resizeTables();
});
I dynamically create a table in javascript and append it to a div. The resulting table seems to have all the same tags and stylings as a straight up html table I used in the proof of concept, yet the table cells do not stretch.
When I place a border on the table, I see that the table itself is at 100% width, but the outlined cells simply do not stretch to fill it out (it looks like a table inside another one cell table in Chrome).
Both IE and Chrome give me the same behavior.
Here is my code:
var tbl = document.createElement("table");
tbl.cellPadding = 0; tbl.cellSpacing = 0;
var tblBody = document.createElement("tblBody");
var tr = document.createElement("tr");
var td;
td = document.createElement("td");
td.style.width="70px";
td.appendChild(this.getFirstDiv());
tr.appendChild(td);
td = document.createElement("td");
td.style.width="300px";
td.appendChild(this.getSecondDiv());
tr.appendChild(td);
td = document.createElement("td");
td.appendChild(this.getThirdDiv());
tr.appendChild(td);
tblBody.appendChild(tr);
tbl.appendChild(tblBody);
I feel like I am missing something obvious here. I have tried display attributes for table and table-row. I have tried width: auto.
What am I missing?
i am tyring to insert textboxes to create empty rows but i want first textbox should be of 50px only
i am creating them onclick event of a button using DOM approach
how to define the width with respect to following approach
j is a variable being handled somewhere & cols is no: of columns to be created
for(var t=1;t<=cols;t=t+1)
{
var cell = row.insertCell(t);
var element = document.createElement("input");
element.type = "text";
element.id= 'text['+j+']['+(t)+']';
element.name= 'text['+j+']['+(t)+']';
element.value="";
cell.appendChild(element);
}
some times it may works
element.style.width = width + 'px';
try it once in case the above suggestions fails
or by using this,
element.setAttribute("style","width:50px");
Try the following:
In CSS:
.firsttext
{
width: 50px;
}
In Javascript:
if (t==1)
{
element.className = "firsttext";
}
I'm trying to dynamically create a table from js, although I do know the exact width and height of the table, I do not know the actual width of table cell. I know that it is possible to find the width of the each cell, but I was wondering if you can actually lock it without specifying the width of the cell.
Link to jsfiddle:
http://jsfiddle.net/j3TEz/21/
My js file:
window.addEventListener('load',init,false);
function init(){
var table = document.getElementById('myTable');
var tr = 3;
var td=5;
var innerTable = '';
for(var trCounter=0;trCounter<tr;trCounter++){
innerTable+='<tr>';
for(var tdCounter=0;tdCounter<td;tdCounter++){
var id=(trCounter*td)+tdCounter;
innerTable+='<td id="'+id+'" onclick="addText('+id+')"></td>';
}
innerTable+='</tr>';
}
table.style.width="600px";
table.style.height="300px";
table.style.border="1px solid black";
table.innerHTML=innerTable;
}
function addText(id){
document.getElementById(id).innerHTML="Lorem Ipsum";
}
Css table-layout set to fixed will keep the columns width fixed, the size will be determined by the first row columns.
Hope this help.
I have one table which display data as from Dynamic Content, I want to make table width 100% when there is 6 cols. and table width auto if less the 5 cols.
I tried with CSS but, when there is only two cols, it expand two cols to full width while have table 100% width and looks awkward.
Is there any Javascript, jQuery script available to get this result?
Using jQuery and ensuring you choose the first row in the table body in case the thead has a different layout.
function setTableWidth(tableId) {
var $tbl = $('#'+tableId);
var newWidth = $tbl.find('tbody>tr:eq(0)>td').length > 5 ? '100%' : 'auto';
$tbl.width(newWidth)
}
Depending on how you're loading the dynamic content, there might be an easier way, but this function should do what you need:
function setTableWidth(tableId) {
myTable = document.getElementById('tableId');
if (myTable.getElementsByTagName('tr')[0].getElementsByTagName('td').length > 5)
myTable.style.width = '100%';
else
myTable.style.width = 'auto';
}
Note though, that it won't work if any of the cells in the first row have a colspan. It's simply counting the number of columns in the first row and setting the width based on that.