0

私のテーブル/ウェブページは幅1250px、中央にあります。しかし、私のような1024ピクセル幅のモニターの場合、ページ全体を表示するには「右」にスクロールする必要があります。スクロールする必要がないように、自分のサイズの解像度の中央に配置したいのですが。

これが私のコードです：

<html>
<head>
<title>blah</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<table id="Table_01" width="1250" height="1500" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td rowspan="8">
            <img src="images/site_layout_01.gif" width="148" height="1500" alt=""></td>
        <td colspan="9">
            <img src="images/header-image.jpg" width="968" height="336" alt=""></td>
        <td rowspan="8">
            <img src="images/site_layout_03.gif" width="134" height="1500" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/site_layout_04.gif" width="968" height="71" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/site_layout_05.gif" width="42" height="201" alt=""></td>
        <td>
            <img src="images/review1.jpg" width="195" height="84" alt=""></td>
        <td rowspan="2">
            <img src="images/site_layout_07.gif" width="40" height="201" alt=""></td>
        <td>
            <img src="images/review2.jpg" width="195" height="84" alt=""></td>
        <td rowspan="2">
            <img src="images/site_layout_09.gif" width="40" height="201" alt=""></td>
        <td>
            <img src="images/review3.jpg" width="195" height="84" alt=""></td>
        <td rowspan="2">
            <img src="images/site_layout_11.gif" width="40" height="201" alt=""></td>
        <td>
            <img src="images/review4.jpg" width="195" height="84" alt=""></td>
        <td rowspan="2">
            <img src="images/site_layout_13.gif" width="26" height="201" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/site_layout_14.gif" width="195" height="117" alt=""></td>
        <td>
            <img src="images/site_layout_15.gif" width="195" height="117" alt=""></td>
        <td>
            <img src="images/site_layout_16.gif" width="195" height="117" alt=""></td>
        <td>
            <img src="images/site_layout_17.gif" width="195" height="117" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/main-image.jpg" width="968" height="161" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/site_layout_19.gif" width="968" height="9" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/obama_quote.gif" width="968" height="63" alt=""></td>
    </tr>
    <tr>
        <td colspan="9">
            <img src="images/site_layout_21.gif" width="968" height="659" alt=""></td>
    </tr>
</table>
</body>
</html>

どうすればこれを達成できますか？

4

5 に答える 5

0

ひどい（しかし機能している）解決策は次のようになります：テーブルの幅を設定し、それを中央に配置します（width: 1250px; margin: 0 auto;）-これにより、テーブルが高解像度モニターの中央に配置されます。次に、要素に設定できoverflow-x: hiddenますbody（ラッパーがないため）。これにより、水平スクロールバーが表示されなくなります。

于 2012-04-29T07:56:03.790 に答える
0

テーブルの最小幅を 1025px および 100% に設定できます。それでも、小さなガラスの中に大きなガラスを配置する方法がないため、スクロールが必要になります。

#Table_01 {
  width: 100%;
  max-width: 1680px;
  min-width: 1025px;
}

更新: あなたの更新された質問から、各辺の余白を 113px に設定したいと思います。以下を使用してそれを行うことができます。

#Table_01 {
    margin: 0 113px 0 113px;
}
于 2012-04-29T06:13:06.300 に答える
0

まず、テーブルにある非推奨の属性を捨てます。css を介してそれらを正しく適用します。次に、画面サイズに合わせて変化するメディアクエリを追加します

#Table_01{margin:0 auto; width:1250px}
@media only screen and (max-width:1024px) { #Table_01{width:1024} }

または、 width:100% を設定できます

于 2012-04-29T06:15:33.990 に答える
0

次のcssを使用してください

#Table_01{
      margin:0 auto;
      width:1250px;
}

学習目的でこのコードを保持したい場合は問題ありませんが、一般的な標準では960 ピクセルで保持するように規定されています。

于 2012-04-29T06:07:45.360 に答える