html - HTML表格中的列宽

Question

如何使第二个<td>（包含<input>）属性占据表格宽度的 3/4？

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

我尝试设置为 td colspan=3，但这对我没有帮助。

Answer 1

您可以设置宽度：

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

（或使用带有这些百分比的css，即style="width: 25%"或class="yourCssClassThatHasTheWidthPercentageSetInIt"）

Colspan 用于当您希望单元格跨越其他行中的多列时。

但是你有什么理由使用表格而不是 div 进行布局？

Answer 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

Answer 3

正确的（假设这是合法的表格数据）方法是添加一个<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"/>