Ячейка фиксированной ширины таблицы

Я пытаюсь сделать ячейки фиксированной (в px) ширины внутри таблицы.Ячейка фиксированной ширины таблицы

Это то, что я сейчас:

 <table style="border: 1px solid black; width: 1128px; table-layout: fixed;"> 
      <tbody> 
       <tr> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td> 
       <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td> 
       </tr> 
      </tbody> 
     </table>

Однако ни одна из ячеек таблицы не 4px широкий. Что мне не хватает?

источник

2013-08-21 vitorsdcs

Ну вы же указать ширину таблицы в 1128px. – j08691

Да ширина таблицы правильная, я хочу, чтобы ячейки имели ширину 4 пикселя. – vitorsdcs

Это не работает так, Витор. Таблица состоит из его ячеек, поэтому наличие таблицы шириной 1128 пикселей, заполненной только шириной 12 пикселей, не имеет смысла. Возможно, вы захотите обернуть свою таблицу в div размером 1128px. Или, может быть, вы хотите использовать 'max-width' вместо' width' для ширины таблицы –

Вы можете добавить 4-ый <td> тег, без ширины указанного:

<table style="border: 1px solid black; width: 1128px; table-layout: fixed;"> 
    <tbody> 
     <tr> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 1</td> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 2</td> 
      <td style="background: none repeat scroll 0 0 red; width: 4px;">Row 1 Col 3</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table>

Смотрите результат here. Ширина первых трех ячеек равна 4px, а четвертая пустая ячейка заполняет оставшуюся ширину таблицы.

источник

2013-08-21 20:27:37 kol

Спасибо, это сработало! – vitorsdcs

Ну, вы можете добавить буферные клетки ...

Пример: http://jsfiddle.net/YGRGG/

HTML

<table> 
    <tbody> 
     <tr> 
      <td></td> 
      <td>Row 1 Col 1</td> 
      <td></td> 
      <td>Row 1 Col 2</td> 
      <td></td> 
      <td>Row 1 Col 3</td> 
      <td></td> 
     </tr> 
    </tbody> 
</table>

CSS

table { 
    border: 1px solid black; 
    width: 1128px; 
} 
table td:nth-of-type(2), 
table td:nth-of-type(4), 
table td:nth-of-type(6) { 
    width:4px; 
}

источник

2013-08-21 20:32:54 Duncan

Ячейка фиксированной ширины таблицы

ответ

Смежные вопросы