HTML 表头无法居中，带有引导模式表数据答案

【问题标题】：HTML table header could not be centered, with bootstrap modal table dataHTML 表头无法居中，带有引导模式表数据
【发布时间】：2018-05-16 01:36:38
【问题描述】：

我仍然是 Web 开发的学生，我想将每个表头对齐到每个列的中心，但我似乎无法做到。我尝试将 align="center" 添加到我的每个 <th> 元素中，但它仍然失败。难道是因为我的模态？它一直居中，直到我将模态添加到表格数据中。

<body>

<h1 align="center">OVERTIME REQUEST</h1>

<table align="center" style="width:100%">
<th align="center">Date</th>
<th align="center">Remarks</th>
<th align="center">Start</th>
<th align="center">End</th>
<th align="center">Total</th>
<th align="center">Employee's Signature</th>
<th align="center">Leadman</th>
<th align="center">Time-Keeper</th>
<tr>
<form>
    <td align="center"><input type="text"></td>
    <td align="center"><input type="text"></td>
    <td align="center"><input type="text"></td>
    <td align="center"><input type="text"></td>
    <td align="center"><input type="text"></td>
    <td align="center"><span class="container" align="center">

        <!-- Trigger the modal with a button -->
         <button type="button" style="margin:auto;" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Upload Signature</button>

          <!-- Modal -->
           <div class="modal fade" id="myModal" role="dialog">
             <div class="modal-dialog modal-lg">
                <div class="modal-content" >
                  <div class="modal-header" align="center">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>

                        </div>
                          <div class="modal-body">
                          <iframe src="test.html" height="450" width="600" align="center"></iframe>
                        </div>
                    <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
     </div>
    </span>
    </td>
   </form>
   </table>
  </body>

另外，我想去掉每个表格数据中的填充，所以我把它加到了我的脑海中：

<style>

table, th, td {
border: 1px solid black;
border-collapse: collapse;
}

th, td {
padding: 0px;
}

</style>

但它也不起作用。有什么我看不到的问题吗？

this is what my page looks like

this is what it should look like or atleast almost

*编辑：

我已经在我的页面中添加了以下 css 内部样式，但它仍然无法使我的表头居中：

  th{

    text-align: center;
  }

然而，如果我把它作为一个内联样式，它工作得很好。怎么可能？似乎是什么问题？

【问题讨论】：

align 是 HTML5 规范的过时属性。只需使用 text-align css 样式.. 根据文档：“要实现与左、中、右或对齐值相同的效果，请将 CSS text-align 属性应用于元素。” - developer.mozilla.org/en-US/docs/Web/HTML/Element/th

标签： html css

【解决方案1】：

根据我上面的评论：align 是 HTML5 规范的过时属性。

每documentation:

要实现与 left、center、right 或 justify 值相同的效果，请将 CSS text-align 属性应用于元素。

简单使用：

th {
  text-align: center;
}

此外，您还没有关闭表单标签，这会导致呈现问题。

将模态框移到body 标记的底部也是一个好习惯，因为它与放置在特定位置无关，只要指定了 id，它就会显示：

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}
th {
 text-align: center !important;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<h1 >OVERTIME REQUEST</h1>

<table style="width:100%">
<tr>
  <th>Date</th>
  <th>Remarks</th>
  <th>Start</th>
  <th>End</th>
  <th>Total</th>
  <th>Employee's Signature</th>
  <th>Leadman</th>
  <th>Time-Keeper</th>
</tr>
<tr>
<form>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td><input type="text"></td>
    <td>
        <!-- Trigger the modal with a button -->
         <button type="button" style="margin:auto;" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Upload Signature</button>
    </td>
    <td></td>
    <td></td>
</form>
</tr>
</table>

注意：Bootstrap 有时会让生活变得艰难，您可以使用 !important 来确保它只符合您的价值：

th {
  text-align: center !important;
}

【讨论】：

@GenesisTepait 查看编辑，根据您提供的信息和没有代码，很难说发生了什么。可能有许多潜在的或周围的贡献者，但我的猜测是 bootstrap 有一些 js 行为或可能的后备，以确保它们的样式得到实现。您可以使用!important 覆盖

【解决方案2】：

我注意到您正在使用align 属性。尝试改用 class="center" 并将该类添加到您的 CSS。

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

th, td {
  padding: 0px;
}

td {
  padding-left: 20px;  /*to add left padding*/
  padding-right: 20px; /*to add right padding*/
}

.center {
  text-align: center; /* to cetner text */
}

这就是将每个align="center" 属性替换为class="center" 的html 代码的样子。

  <table class="center" style="width:100%">
    <thead>
      <th class="center">Date</th>
      <th class="center">Remarks</th>
      <th class="center">Start</th>
      <th class="center">End</th>
      <th class="center">Total</th>
      <th class="center">Employee's Signature</th>
      <th class="center">Leadman</th>
      <th class="center">Time-Keeper</th>
    </thead>
    <tbody>
      <tr>
          <form>
              <td class="center"><input type="text"></td>
              <td class="center"><input type="text"></td>
              <td class="center"><input type="text"></td>
              <td class="center"><input type="text"></td>
              <td class="center"><input type="text"></td>
              <td class="center">
                <!-- Trigger the modal with a button -->
                 <button type="button" style="margin:auto;" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Upload Signature</button>

                <!-- Modal -->
                 <div class="modal fade" id="myModal" role="dialog">
                   <div class="modal-dialog modal-lg">
                      <div class="modal-content" >
                        <div class="modal-header" class="center">
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                        </div>
                        <div class="modal-body">
                          <iframe src="test.html" height="450" width="600" class="center"></iframe>
                        </div>
                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                        </div>
                      </div>
                    </div>
                  </div>          
              </td>
           </form>
         </tr>
    </tbody>
  </table>

另外，要记住的是始终遵循以下 html 表结构。这有助于 Web 可访问性和一般有组织的表结构。可以在此处找到更多详细信息，包括<tfoot> 标签https://www.w3schools.com/tags/tag_thead.asp。

<table>
    <thead>
         <th></th>
         <th></th>
     </thead>
     <tbody>
         <tr>
            <td></td>
            <td></td>
         </tr>
     </tbody>
 </table>

【讨论】：

没有改变任何东西。看起来还是一样。 *将上面的代码添加到我的头上不起作用，但是我将样式属性添加到我的每个表头都可以正常工作。
我在答案中添加了更多详细信息。请让我知道这是否有助于按预期显示表格。