Центрирование определенного столбца таблицы на странице - PullRequest
0 голосов
/ 13 сентября 2011

У меня есть таблица с двумя столбцами.Я хочу центрировать крайний правый столбец со страницей, чтобы левый столбец свисал влево.

<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.

Ответы [ 2 ]

5 голосов
/ 13 сентября 2011

Вы правы - 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;
            }
3 голосов
/ 13 сентября 2011

Вам нужно будет обернуть свой стол в 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/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...