CODEWITHSUNDEEP
javascriptjqueryhtmlcss
juniorbansal
juniorbansal

Reputation: 1271

How to align the <td> at center in a dynamic HTML table

I referred this generate-html-table-using-javascript webpage and created a table. It works fine. In the javascript function it places the items as left aligned. How do I access the element and align it to center?

Here is my javascript function

function addRow() {
  var table = document.getElementById("myTableData");
  var rowCount = table.rows.length;
  var row = table.insertRow(rowCount);
  row.insertCell(0).innerHTML = '<input type="button" value = "Delete" style="width: 65px;" class="btn btn-danger" onClick="Javascript:deleteRow(this)">';
  row.insertCell(1).innerHTML = '<input id="workloadDescription" style="width: 138px;" name="workloadDescription" type="text" value="Description"/>';

}

<table border="1" align="center" id="myTableData" span style="width:1580px;">
  <thead>
    <tr>
      <td bgcolor="green" align="center" style="width: 75px;overflow: hidden;">
        <font color="white">Operation</font>
      </td>
      <td bgcolor="green" align="center" style="width: 140px;overflow: hidden;">
        <font color="white">Workload <br> Description
        </font>
      </td>
  </thead>
</table>

The HTML looks like this enter image description here

But I want the button to be aligned in the center.

Upvotes: 1

Views: 10677

Answers (6)

Robert
Robert

Reputation: 114

To align itens you can use margin: auto; and text-align:center; https://jsfiddle.net/r84tcq5c/

Upvotes: 1

Rajesh Nadar
Rajesh Nadar

Reputation: 167

Before writing the CSS for this I recommend you to wrap the td elements inside a div and the below CSS will do the rest for you.

#myTableData tr td div {text-align:center; }

This will center your div.

Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.

Find Your Fiddle

https://jsfiddle.net/ey36s317/3/

Upvotes: 1

DrKey
DrKey

Reputation: 3495

Just use text-align: center on <td> as follow:

tbody > tr > td {
  text-align: center;
}

If you want to center only the content of first <td>, select the first child:

tbody > tr > td:first-child {
  text-align: center;
}

JSFiddle

Upvotes: 1

AG_
AG_

Reputation: 2689

change your code to below, add margin:auto; display:block; to your button this will make button center

row.insertCell(0).innerHTML = '<input type="button" value = "Delete" style="width: 65px; margin:auto; display:block;" class="btn btn-danger" onClick="Javascript:deleteRow(this)">';

Upvotes: 3

caisah
caisah

Reputation: 2087

Try to keep your styles separate from JavaScript.

With JavaScript you should add a new class to the button:

row.insertCell(0).innerHTML = '<input type="button" value = "Delete" style="width: 65px;" class="btn btn-danger btn-centered" onClick="Javascript:deleteRow(this)">';

In your CSS file, you style that button:

.btn-centered {
  text-align: center;
}

Upvotes: 1

TLJ
TLJ

Reputation: 4945

All you need to do is adding text-align:center; to your table like so

<table border="1" align="center" id="myTableData" span style="width:1580px; text-align:center;"

Upvotes: 1

Related Questions