如何对齐 <td> 在动态HTML表格的中心

Question

我引用了这个generate-html-table-using-javascript网页并创建了一个表。 工作正常。 在javascript函数中，将各项按左对齐放置。 如何访问元素并使其居中对齐？

这是我的JavaScript函数

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>

HTML看起来像这样

但是我希望按钮在中心对齐。

Answer 1

您所需要做的就是添加text-align:center; 像这样

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

Answer 2

尝试将样式与JavaScript分开。

使用JavaScript，您应该向按钮添加一个新类：

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

在CSS文件中，为该按钮设置样式：

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

Answer 3

要对齐，可以使用margin: auto; 和text-align:center; https://jsfiddle.net/r84tcq5c/

Answer 4

在为此编写CSS之前，我建议您将td元素包装在div中，下面的CSS将为您完成其余工作。

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

这将使您的div居中。

Div本身就是一个障碍。 因此，您需要为div定义样式。

找到你的小提琴

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

Answer 5

将您的代码更改为以下代码，添加margin:auto; display:block; margin:auto; display:block; 到您的按钮，这将使按钮居中

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

Answer 6

只需使用text-align: center以<td>为text-align: center ，如下所示：

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

如果只想将第一个<td>的内容居中，请选择第一个子代：

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

JSFiddle