javascript - How to align the <td> at center in a dynamic HTML table - Stack Overflow

admin管理员组

文章数量:1289540

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

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

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

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

• javascript
• jquery
• html
• css

Share Improve this question Follow edited Mar 12, 2017 at 14:41 mplungjan 178k2828 gold badges181181 silver badges240240 bronze badges asked Mar 12, 2017 at 14:31 juniorbansaljuniorbansal 1,27199 gold badges3131 silver badges5454 bronze badges 3

• You forgot a 'c' in 'javasript:....' – JustARandomProgrammer Commented Mar 12, 2017 at 14:35
• Thank u. Corrected it in my code and in this post – juniorbansal Commented Mar 12, 2017 at 14:36
• The label Javascript is not needed here Javascript:deleteRow – mplungjan Commented Mar 12, 2017 at 14:42

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

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

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

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

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

Before writing the CSS for this I remend 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/ey36s317/3/

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

本文标签： javascriptHow to align the lttdgt at center in a dynamic HTML tableStack Overflow