Bootstrap模态框嵌入表格后表头无法居中及内边距无效问题求助

看起来你遇到的问题主要来自两个方面：HTML结构不规范和Bootstrap样式的优先级覆盖，咱们一步步来解决：

1. 先修复不规范的HTML结构 #

你的表格写法有两个不符合标准的地方，这可能导致浏览器解析样式时出问题：

• <th> 标签必须包裹在 <thead> 和 <tr> 内部，不能直接放在 <table> 下
• <form> 不能直接作为 <tr> 的子元素，HTML规范里 <tr> 的子元素只能是 <td> 或 <th>

修正后的表格结构应该是这样：

<body>
  <h1 align="center">OVERTIME REQUEST</h1>
  <table align="center" style="width:100%">
    <!-- 新增thead和包裹th的tr -->
    <thead>
      <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>
    </thead>
    <tbody>
      <tr>
        <!-- 把form移到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"><input type="text"></td>
        <td align="center">
          <form>
            <span class="container">
              <!-- 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>
          </form>
        </td>
        <!-- 补充缺失的表格单元格，保证结构完整 -->
        <td align="center"></td>
        <td align="center"></td>
      </tr>
    </tbody>
  </table>
</body>

2. 解决Bootstrap样式覆盖问题 #

你添加的自定义CSS无效，是因为Bootstrap的内置表格样式优先级比你的高，尤其是引入Bootstrap后，默认样式会影响表格元素。

表头居中解决方案 #

把你的CSS改成更具体的选择器，或者用!important强制覆盖（当没有更优选择器方案时使用）：

/* 更具体的选择器，提升优先级 */
table thead th {
  text-align: center !important;
}

另外要确保你的自定义CSS在Bootstrap CSS之后加载，这样相同优先级的样式会覆盖Bootstrap的默认设置。

内边距无效解决方案 #

同样通过提升样式优先级解决：

table th, table td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 0 !important;
}

为什么内联样式有效？ #

内联样式（比如th align="center"或者style="text-align:center"）的优先级是最高的，所以不会被Bootstrap的样式覆盖，但这不是最佳实践，还是用外部/内部CSS统一管理样式更便于维护。

内容的提问来源于stack exchange，提问作者GenesisTepait