Ширина столбца в таблице HTML

0

Как я могу заставить второй <td> (который содержит атрибут <input>) занимать 3/4 ширины таблицы?

 <table>
     <tr>
         <td>
             Name
         </td>
         <td>
            <input type="text"/>
         </td>                   
     </tr>
 </table>

Я попытался установить td colspan=3, но это мне не помогает.

Теги:

3 ответа

2
<table>
 <tr>
     <td style="width: 25%">
         Name
     </td>
     <td style="width: 75%">
        <input type="text"/>
     </td>                   
 </tr>
</table>

Просто быстрое и грязное решение. Было бы лучше стилизовать эти вещи в отдельном файле css и использовать классы вместо встроенного css. Лучше всего было бы использовать colgroups для стиля и описания столбцов таблицы. вы можете прочитать об этом здесь: http://www.w3schools.com/tags/tag_colgroup.asp

2

Вы можете установить ширину:

<table>
     <tr>
         <td width="25%">
             Name
         </td>
         <td width="75%">
            <input type="text"/>
         </td>                   
     </tr>
 </table>

(или используйте css с этими процентами, то есть style="width: 25%" или class="yourCssClassThatHasTheWidthPercentageSetInIt")

Colspan - это когда вы хотите, чтобы ячейка охватывала несколько столбцов в других строках.

Но есть ли причина, по которой вы используете таблицы вместо div для макета?

  • 0
    Я думаю, что <table> в этом случае очень удобно
  • 0
    Вы не должны использовать таблицы для этого. столы для столов. Вы можете и должны использовать только элементы формы для создания такой формы.
Показать ещё 2 комментария
1

Правильный (при условии, что это были законно табличные данные), было бы добавить <colgroup> как уже предположил razhial, который может выглядеть так (демо с некоторым дополнительным CSS, чтобы увидеть, как он работает):

<table>
  <colgroup>
    <col/>
    <col width='75%'/>
  </colgroup>
  <tbody>
    <td>Name</td>
    <td><input type="text"/></td>
  </tbody>
</table>

Однако из вашего примера, как представляется, гораздо более чистый подход, который является элементом <label> который работает следующим образом (demo):

<label for="Name">Name</label>
<input type="text" id="Name"/>
  • 0
    все, что вы только что сказали, уже было сказано на этой странице. и 66% не бросили 3/4
  • 0
    Вы абсолютно правы в отношении 66% (оппоненты), но все же <colgroup> использования <colgroup> или <label> не <colgroup> в других ответах.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню