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已经建议可能看起来像这样（demo带有一些额外的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"/>

HTML表格中的列宽

3 个答案: