Установить интервал между ячейками CSS для TD - PullRequest
Новая
       55

Установить интервал между ячейками CSS для TD

1 голос
/ 30 марта 2012

Итак, у меня есть эта определенная таблица.Я знаю, что я не должен использовать таблицу для разметки, но в этом случае я вынужден.

Мне нужно стилизовать интервал между ячейками конкретного TD (TD с классом .ritey).Я знаю, что должен настроить таргетинг на TABLE, чтобы установить интервал между ячейками, но я не хочу, чтобы другие TD были затронуты.Мне нужно только стилизовать этот единственный TD.

Есть ли способ сделать это?

Вот быстрый набросок с MS Paint, надеюсь, это объясняет, что мне нужно:

В общем макете будет несколько строк (несколько TR).В этом вопросе я показываю только один ряд.Мне нужно, чтобы все столбцы (все TD) оставались неизменными, кроме .ritey.Я хочу, чтобы у .ritey было 10px поле вокруг (поле, а не отступ).Я надеюсь, что это объясняет лучше!

.

И вот что я получил в своем HTML.Я пытался td.ritey { border-spacing:10px; }, но, похоже, он не работает. 

  <table width='100%' border='0' cellspacing='1' cellpadding='3' class='postable'>
  <tr>
  <td valign='middle' class='row4 uname' colspan='2'>
  <div class='name'>
   <a href='#'>Guest</a>
  </div>
  </td>
  </tr><tr>
  <td width='100%' valign='top' class='ritey'>
        <div class='postcolor'>
         Post content
        </div>
  </td><td valign='top' class='lefty'>
    <div class='postdetails'>
    Details
</div>
  </td>
  </tr></table>

Любая помощь действительно приветствуется.

Ответы [ 2 ]

3 голосов
/ 30 марта 2012

См. Скрипт и код для демонстрации

скрипт: http://jsfiddle.net/kDKEw/2/

демо: http://jsfiddle.net/kDKEw/2/embedded/result/

HTML: 

<table cellspacing="1" cellpadding="3" border="1" width="100%" class="postable">
  <tbody><tr>
  <td valign="middle" colspan="2" class="row4 uname">
  <div class="name">
   <a href="#">Guest</a>
  </div>
  </td>
  </tr><tr style="height: 36px;">
  <td width="100%" valign="top" class="ritey" style="width: 90%; position: absolute; margin: 4px;">
        <div class="postcolor">
         Post content
        </div>
  </td><td valign="top" class="lefty" style="float: right; width: 6%;">
    <div class="postdetails">
    Details
</div>
  </td>
  </tr>
</tbody>
</table>

SS:

enter image description here

Обновлена ​​скрипка согласно иллюстрации к изображению (http://i.imgur.com/o56CD.png): дано deathlock

Fiddle: http://jsfiddle.net/7xfxF/1/

Демо: http://jsfiddle.net/7xfxF/1/embedded/result/

SS:

enter image description here

1 голос
/ 30 марта 2012

В CSS вы должны использовать padding для мобильного телефона и border-spacing для мобильного пространства. Вот рабочий код:

РЕДАКТИРОВАТЬ

Я пересмотрел CSS в соответствии с предоставленным вами изображением. Я добавил дополнительный стиль для класса postcolor. Смотрите обновленные CSS и Fiddle. Я также обновил скриншот.

Если вы хотите, чтобы границы сжимались, измените border-collapse на collapse и удалите свойство border-spacing. 

<style type="text/css">    
    table.postable {
      border-collapse: separate !important; 
      border-spacing: 1px;        
    }
    table.postable td {
      border:1px solid black;      
      padding: 5px;
    }
    td.ritey {
      border: 0px !important;
      padding: 10px 5px 10px 5px !important;
    }
    td.lefty {  
      padding: 10px 5px 10px 5px !important;    
    }
    div.postcolor {
      margin: 3px;
      padding: 10px;
      border: 1px solid black;   
    }         
</style>
<table width='100%' class='postable'>
    <tr>
       <td colspan='2'>
          <div class='name'>
             <a href='#'>Guest</a>
          </div>
       </td>
    </tr>
    <tr>
       <td width='100%' valign='top' class='ritey'>
          <div class='postcolor'>
             Post content
          </div>
       </td>
       <td valign='top' class='lefty'>
          <div class='postdetails'>
             Details
          </div>
       </td>
   </tr>
</table>

ВЫВОД: enter image description here Смотрите этот jsFiddle для демонстрации.

...