Question

我有一个有两列的表。我想将最右边的列与页面居中，这样左列就会挂起。

<table width="960" border="0" cellpadding="0">
 <tr>
   <td width="100"><!--COLUMN TO HANG TO LEFT--></td>
 <td><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>

我假设解决方案是CSS。

Answer 1

你是对的 - CSS是要走的路。为列添加您可以定位的id或class，并在CSS中心。假设您的表格宽度在您想要的位置，请为其指定一个宽度，从而减去左侧的另一列。
像这样：

HTML：

<table width="960" border="0" cellpadding="0">
 <tr>
   <td width="100"><!--COLUMN TO HANG TO LEFT--></td>
   <td class="center"><!--COLUMN TO BE CENTER WITH PAGE--></td>
</tr>
</table>

CSS：

   td.center { 
            text-align: center;
            width: 860px;   
           }

编辑：根据以下评论，这里是使用div而不是表格的示例布局 http://jsfiddle.net/willyrybone/8eR6G/

HTML：

 <div id="page-wrap"> 
    <div id="sidebar"> 
        <p>this is some</p> 
        <p>sidebar content</p> 
    </div> 
    <div id="main-content"> 
        <p>This is some</p> 
        <p>centered main content</p> 
    </div> 
<div>

CSS：

#page-wrap {
                width: 960px;
                margin: auto;
            }

#sidebar  {
                float:left;
                width: 100px;
                background: #eee;
            }

#main-content {
                text-align:center;
                background:#bbb;
            }

Answer 2

你必须将你的表包装在一个div中，然后将其作为中心：

<div style="width:1060px; margin: auto">
    <table width="960" border="0" cellpadding="0">
        <tr>
            <td width="100">COLUMN TO HANG TO LEFT</td>
            <td style="background: #ccc">COLUMN TO BE CENTER WITH PAGE</td>
        </tr>
    </table>
</div>

http://jsfiddle.net/9HgpM/embedded/result/

将特定表列居中到页面

2 个答案: