I am creating a table as follows
table = document.createElement('table');
table.style.textAlign = 'center';
table.setAttribute('border', '2');
var thead = document.createElement('thead');
thead.style.color = "fuchsia ";
thead.style.textAlign = 'center';
When I populate the table, the row content is center aligned as expected but the header row is always left aligned. What can I do to make it center aligned?
Thanks
thead is a container for th's. The th's always need to fill the thead and so the natural place to centre align things for a header row is within the th's, so...
var th = document.createElement('th');
th.style.color = "fuchsia ";
th.style.textAlign = 'center';
Oh, and also, your thead hasn't got the centre alignment set, you're setting it on the table twice.
Related
EDIT: I couldn't solve the problem so I removed the bootstrap classes and have made all buttons on my own so now they are aligned perfectly and it seems like the bootstrap classes were messing things up
How can I align different td in a tr in a HTML table. Here you can find the screenshot of what I am trying to say: Image of different elements that I want to vertically align in a tr element
Any suggestions would be helpful. Thanks in advance!
This tr is generated by js. Code:
let itemRow = document.createElement('tr');
let item1 = document.createElement('td');
let item2 = document.createElement('td');
let item3 = document.createElement('td');
let item4 = document.createElement('td');
let item5 = document.createElement('td');
let item6 = document.createElement('td');
let btnRemove = document.createElement('button');
let btnEdit = document.createElement('button');
item1.innerHTML = bookTitle;
item2.innerHTML = author;
item3.innerHTML = recipient;
item4.innerHTML = dateIssued;
btnRemove.className = 'btn btn-outline-danger btn-remove';
btnRemove.textContent = 'X';
btnEdit.className = 'btn btn-outline-success btn-edit';
btnEdit.textContent = 'Edit';
itemRow.appendChild(item1);
itemRow.appendChild(item2);
itemRow.appendChild(item3);
itemRow.appendChild(item4);
item6.appendChild(btnEdit);
item5.appendChild(btnRemove);
itemRow.appendChild(item6);
itemRow.appendChild(item5);
list.appendChild(itemRow);
A basic table, without any padding should be vertically aligning everything by default.
It looks like you may have to undo/override any CSS thats being applied to your markup, either with your own CSS or the one from Bootstrap, as #burham noticed you are using it.
This is a very simple fiddle example with each <td> being 80px in height to show the 'natural' vertical alignment of a table.
https://jsfiddle.net/pzm6ktv5/
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?
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'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'm adding new rows to a table dynamically, with this code:
tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
th = tr.insertCell(0);
td = tr.insertCell(1);
But what I actually got are two td cells. I want a th, as you can see.
It says the tagName property isn't changeable.
How can I do this?
Will I need to use 'normal' methods like createElement and appendChild?
I don't see any official docs that allow you to do this.
W3C Documentation for TR / TR.insertCell
The createElement/appendChild will work though.
I got it to work this way:
var table = d3.select("#table");
table.html("");
head = table.append("tr");
head.append("th").text("column_header_1");
head.append("th").text("column_header_2");
chartData.forEach(function (obj) {
row = table.append("tr");
row.append("td").text(obj.datapoint_1);
row.append("td").text(obj.datapoint_2);
What I do is define the th first, such as TableHeaderRow thr = new TableHeaderRow();
Add cell to it, then add it to the table.
a fast and working approch would be using a <b></b> tag in the innerHtml
tbody = document.getElementById('tbody');
tr = tbody.insertRow(-1);
tr.id = 'last';
td = tr.insertCell(1);
th = tr.insertCell(0);
th.innerHtml = '<b>th cell1</b>
th = tr.insertCell(1);
th.innerHtml = '<b>th cell2</b>
//and so on