Question

我有一个程序，它在<div align="center">标记内有3个单独的表。第一个表已经显示，但是如果按下按钮，则仅显示下两个表。只有第一个表格在Chrome中正确对齐，而其他两个表格似乎在Chrome中保持对齐。我在Safari和IE中对此进行了测试，所有内容都已正确对齐，但它不适用于Chrome和Firefox。如何解决这个问题？

表格的HTML：

<!-- 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

我建议您为所有表格使用max-width，然后使用margin: 0 auto将所有表格置于中心位置，如下所示：

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

这是一个展示结果的JS小提琴。您将需要拉伸小提琴中的查看窗格以查看表格是否居中：https://jsfiddle.net/jLn77s2r/

这可以解决您的问题，但我建议您稍微清理一下CSS和HTML。并且每个表格单元格中的字段都不流畅，因此它不会以任何方式响应。您可以通过在CSS中添加以下内容来解决此问题：

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

但是你必须在每个单元格之间添加间距。您可以通过多种方式完成此操作。我把它留给你。以下是添加了输入宽度的小提琴的更新示例：https://jsfiddle.net/jLn77s2r/1/

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

将块元素放在<p>中是无效的HTML。幸运的是，浏览器可以通过基本的纠错来弥补这一点，但它应该是固定的。因此，您的HTML不会通过验证检查。

中心对齐在所有浏览器中工作，但Chrome和Firefox

1 个答案: