0

私のページには、ページを中央に配置するメイン div があります。margin: auto; を使用してこれを行います。

ページ自体はうまく機能しますが、データベースから動的にデータをロードするテーブルを含めると、ページが最初の中心に正しく配置されません。

以下の例を参照してください。

<!DOCTYPE html>
<html>
<head>
<title>Invoice Control</title>
</head>

<body class="single">

<div id="wrapper" style="width:1100px;margin:auto;padding:10px; border: 1px solid gray">

    <div id="content" style="border: 1px solid red">

        here comes the table, which makes the site not center nicely

        <table>
            <tr>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
                <td>THIS IS DUMMY TEXT TO FILL THE TABLE AND EXCEED THE 1100PX</td>
            </tr>
        </table>

    </div>
</div>

</body>
</html>

中央の div が再び適切に中央に配置されるようにするために、私がしなければならないことはありますか?

4

2 に答える 2