0

我的表格/网页宽 1250 像素，居中。但是对于像我这样的 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

first off, ditch the deprecated attributes you have on your table. apply them correctly via css. then add a media query that changes for your screen size

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

or you could set width:100%

于 2012-04-29T06:15:33.990 回答
0

一个糟糕（但有效）的解决方案如下：您在桌子上设置宽度并将其居中（width: 1250px; margin: 0 auto;） - 这将使桌子在高分辨率显示器上居中。然后你可以设置overflow-x: hidden你的body元素（因为没有包装器） - 这将防止水平滚动条出现。

于 2012-04-29T07:56:03.790 回答
0

我有同样的问题，表格必须在屏幕中央，我找到了以下解决方案。

您可以直接将同一行添加到您的表中：

<table style="margin: auto;">
于 2014-10-01T05:30:54.367 回答
0

您可以将表格最小宽度设置为 1025px 和 100%。即便如此，您仍需要滚动，因为无法将较大的玻璃放置在较小的玻璃中。

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

更新： 根据您更新的问题，我猜您希望将每边的边距设置为 113 像素。您可以使用以下方法做到这一点。

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

使用以下 CSS

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

如果您想保留此代码用于学习目的，没关系，但通用标准说保持在960 像素。

于 2012-04-29T06:07:45.360 回答