如何在动态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将为你完成剩下的工作。

SELECT from_ 
FROM uploaded_emails1
WHERE from_ != 'test@email.com'
AND from_ NOT IN (SELECT email FROM candidate_emails2)

这将使你的div居中。

Div本身就是一个障碍元素。因此，您需要为div定义样式如何表现。

找你的小提琴

astype

Answer 5

将您的代码更改为以下内容，将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>，如下所示：

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

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

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

JSFiddle