Search code examples
htmlcssgoogle-chromefirefoxcenter

Center Align Working in all Browsers but Chrome and Firefox

I have this program which has 3 separate tables all inside a <div align="center"> tag. The first table is already displayed, however the next two only display if a button is pressed. Only the first table gets center aligned properly in Chrome, while the other two seem to be left aligned in Chrome. I tested this in Safari and IE and everything is properly aligned, however it is NOT in Chrome and Firefox. How can this be fixed?

HTML for 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>

Relevant 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;
}

EDIT:

Screenshot of what it looks like: enter image description here

Solution

  • I suggest using max-width for all your tables, and then center all tables using margin: 0 auto, as in the following:

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

    Here is a JS Fiddle to show the outcome. You will need to stretch the viewing pane in the fiddle to see the tables get centered: https://jsfiddle.net/jLn77s2r/

    This fixes your problem, but I would suggest cleaning up your CSS and HTML a bit. And your fields in each table cell are not fluid, so it is not responsive in any way. You can fix this by adding the following somewhere in your CSS:

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

    But then you will have to work on adding spacing between each cell. You can do this with in a number of ways. I leave that up to you. Here is an updated example of the fiddle with the input width added: https://jsfiddle.net/jLn77s2r/1/

    As for the use of align="center", this is deprecated in HTML5 so I suggest you don't use it: http://www.w3schools.com/tags/att_div_align.asp

    And putting block elements inside <p> is invalid HTML. Browsers fortunately can compensate for this with basic error correction, but it should be fixed none-the-less. Your HTML would not pass a validation check because of this.