居中对齐适用于所有浏览器，但 Chrome 和 Firefox

Question

我有这个程序，它有 3 个独立的 table，都在一个 <div align="center"> 标签内。第一个 table 已经显示，但是接下来的两个仅在按下按钮时显示。只有第一个 table 在 Chrome 中正确居中对齐，而其他两个在 Chrome 中似乎左对齐。我在 Safari 和 IE 中对此进行了测试，一切都正确对齐，但它不在 Chrome 和 Firefox 中。如何解决？

HTML tables:

<!-- 400 Rebate Tables -->
<!-- 400P -->

<div align="center" id="border">
<p>
<div id="rebate_400p">
<strong>400P</strong><br>
</div>

<table id="tables" cellspacing="5">
    <tr align="center" class="table_titles">
        <td>Tier</td>
        <td>Purchase Minimum</td>
        <td>Multiplier</td>
        <td>UOM</td>
        <td>Retro</td>
        <td>Guaranteed</td>
        <td>Paid</td>
        <td>Delete?</td>
        <td>Add Row</td>
    </tr>
    <tr>
            <td align="center" name="tier">1</td>
            <td><input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[0][0][purchase_minimum]"></td>
            <td><input type="text" class="rebate_tables" data-name="multiplier" name="rows[0][0][multiplier]"></td>
            <td><input type="text" class="rebate_tables" data-name="uom" name="rows[0][0][uom]"></td>
            <td><input type="text" class="rebate_tables" data-name="retro"  name="rows[0][0][retro]"></td>
            <td><input type="text" class="rebate_tables" data-name="guaranteed" name="rows[0][0][guaranteed]"></td>
            <td><input type="text" class="rebate_tables" data-name="paid" name="rows[0][0][paid]"></td>
            <td><input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"></td>
            <td><input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow()"></td>
        </tr>
</table>
</p>

<!-- 400M -->
<p>
<div id="rebate_400m">
<strong>400M</strong><br>
</div>

<table cellspacing="5" id="tables1" style="display: none;">
    <tr align="center" class="table_titles">
        <td>Tier</td>
        <td>Purchase Minimum</td>
        <td>Multiplier</td>
        <td>UOM</td>
        <td>Retro</td>
        <td>Guaranteed</td>
        <td>Paid</td>
        <td>Delete?</td>
        <td>Add Rows</td>
    </tr>
    <tr>
            <td align="center" name="tier">1</td>
            <td><input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[1][0][purchase_minimum]"></td>
            <td><input type="text" class="rebate_tables" data-name="multiplier" name="rows[1][0][multiplier]"></td>
            <td><input type="text" class="rebate_tables" data-name="uom" name="rows[1][0][uom]"></td>
            <td><input type="text" class="rebate_tables" data-name="retro"  name="rows[1][0][retro]"></td>
            <td><input type="text" class="rebate_tables" data-name="guaranteed" name="rows[1][0][guaranteed]"></td>
            <td><input type="text" class="rebate_tables" data-name="paid" name="rows[1][0][paid]"></td>
            <td><input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"></td>
            <td><input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow1()"></td>
        </tr>
</table>
<!-- Button to display table for 400M -->
<input type="button" name="row" value="+" onclick="show2();"/>
</p>

<!-- 400D -->

<p>
<div id="rebate_400d">
<strong>400D</strong><br>
</div>

<table cellspacing="5" id="tables2" style="display: none;">
    <tr align="center" class="table_titles">
        <td>Tier</td>
        <td>Purchase Minimum</td>
        <td>Multiplier</td>
        <td>UOM</td>
        <td>Retro</td>
        <td>Guaranteed</td>
        <td>Paid</td>
        <td>Delete?</td>
        <td>Add Rows</td>
    </tr>
    <tr>
            <td align="center" name="tier">1</td>
            <td><input type="text" class="rebate_tables" data-name="purchase_minimum" name="rows[2][0][purchase_minimum]"></td>
            <td><input type="text" class="rebate_tables" data-name="multiplier" name="rows[2][0][multiplier]"></td>
            <td><input type="text" class="rebate_tables" data-name="uom" name="rows[2][0][uom]"></td>
            <td><input type="text" class="rebate_tables" data-name="retro"  name="rows[2][0][retro]"></td>
            <td><input type="text" class="rebate_tables" data-name="guaranteed" name="rows[2][0][guaranteed]"></td>
            <td><input type="text" class="rebate_tables" data-name="paid" name="rows[2][0][paid]"></td>
            <td><input type="button" class="delRow" value="Delete" onclick="deleteRow(this)"></td>
            <td><input type="button" class="addmoreRowsbutton" value="Add row" onclick="insRow2()"></td>
        </tr>
</table>
<!-- Button to adisplay table for 400D -->
<input type="button" name="row" value="+" id="plus-button" onclick="show3();"/>
</p>
</div>

相关CSS：

/* Takes away individual border around each and every cell */

table {
    border-collapse: collapse;
}

/* Makes 400p, 400m, 400d heading text bold */

.table_titles {
    font-weight: bold;
}

/* Center aligns everything inside the 400p, 400m, 400d tables */

.rebate_tables {
    align-content: center;
    display: block;
    margin: auto;
}

#rebate_400p, #rebate_400m, #rebate_400d {
    border-radius: 5px;
    border-top: 1px solid #9a9a9a;
    border-right: 1px solid #9a9a9a;
    display: block;
    height: 20px;
    margin: 1.5;
    width: 46px;
    background-color: seagreen;
    color:white;
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

/* Border around 400p, 400m, 400d table */

#border {
    background-color: whitesmoke;
    padding: 5px;
    border-style: solid;
    border-color: black;
    margin-left: 20px;
    margin-right: 20px;
}

#plus-button {
    margin-bottom: 5px;
}

编辑：

外观截图：

Answer 1

我建议对所有 table 使用 max-width，然后使用 margin: 0 auto 将所有 table 居中，如下所示：

table {
    border-collapse: collapse;
    max-width: 1210px;
    margin: 0 auto;
    }

这里有一个JS Fiddle来展示结果。您需要在 fiddle 中拉伸查看窗格才能看到 table 居中：https://jsfiddle.net/jLn77s2r/

这解决了您的问题，但我建议稍微清理一下您的 CSS 和 HTML。而且每个 table 单元格中的字段都不是流动的，因此它没有任何响应。您可以通过在 CSS:

的某处添加以下内容来解决此问题

input[type="text"] { width: 100%; }

但随后您将不得不努力增加每个单元格之间的间距。您可以通过多种方式执行此操作。我把它留给你。这是添加了输入宽度的 fiddle 的更新示例：https://jsfiddle.net/jLn77s2r/1/

至于align="center"的使用，在HTML5中已弃用，所以我建议您不要使用它：http://www.w3schools.com/tags/att_div_align.asp

并且将块元素放在 <p> 中是无效的 HTML。幸运的是，浏览器可以通过基本的纠错来弥补这一点，但它应该被修复 none-the-less。因此，您的 HTML 无法通过验证检查。

居中对齐适用于所有浏览器，但 Chrome 和 Firefox

Center Align Working in all Browsers but Chrome and Firefox

html

css

firefox

google-chrome

center

居中对齐 适用于所有浏览器，但 Chrome 和 Firefox

Center Align Working in all Browsers but Chrome and Firefox

html

css

firefox

google-chrome

center

居中对齐适用于所有浏览器，但 Chrome 和 Firefox