如何對齊 <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