2012-01-17 1 views
8

У меня есть таблица, в которой число столбцов может меняться (от 1 до 10), за исключением одного столбца, который должен всегда оставаться на фиксированной ширине, так что нет лишнего места или он не обертывается (это будет используется для добавления или удаления строк в таблице).Могу ли я смешивать ширину процента и ширину пикселя в заголовках таблицы html?

Стол должен быть не более 800px, и я бы хотел, чтобы кнопка отправки перемещалась вправо.

Есть ли способ установить ширину столбцов таблицы, которые изменяются в процентах, и один статический столбец в качестве фиксированной ширины пикселей? Или это вызовет проблемы? Я пробовал несколько разных подходов, но все они кажутся субоптимальными. Есть ли элегантный способ сделать это? Я добавил изображение для справки: http://bayimg.com/BAlLLaaDP.

HTML-:

<html> 
    <head> 
    <style> 
     #container { 
     width: 800px; 
     } 
     #table_container { 
     padding:5px; 
     } 
     #table_container table { 
     width: 85%; 
     } 
     .action { 
     } 
     col { 
     width:29%; 
     } 
     table { 
     width:650px; 
     table-layout: fixed; 
     float: left; 
     } 
    </style> 
    </head> 

<body> 
<div id="container" class="clearfix"> 

    <form> 
      <table class="" border=1> 
       <colgroup> 
        <col > 
        <col> 
        <col> 
        <col class="action"> 
       </colgroup> 
       <th>First Name</th> 
       <th>Last Name</th> 
       <th>Email </th> 
       <th></th> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
       <tr> 
        <td>content 1</td> 
        <td>content 2</td> 
        <td>content 3 </td> 
        <td><a href="">delete row</a> 
       </tr> 
      </table> 
     <div class="mult_answer"> 
      <button class="button orange">Submit Answer</button> 
     </div> 
     </form> 

</div> 

</body> 
</html> 

ответ

5

Там может быть строк с шириной в пикселях и процент в одной таблице, если общая ширина всех рядов составляет не более чем на 100% (если больше строк или таблицы будет масштабирован подходящий контент).
Вы можете добавить ширину к th элементам, если вы используете col только с целью ширины. Лучше оставить хотя бы один столбец без ширины, чтобы он мог сжиматься.
P.S. Я не понимаю, зачем вам нужен width: 100%; для элемента td.

+0

Спасибо. Я удалил ширину для элемента td, который не должен был быть там. – David

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