1. 首頁
  2. 問答
  3. 列寬

列寬

2013-10-22 22 views
0

我怎樣才能使第二<td>（包含<input>）屬性以佔據表寬度的3/4？列寬

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

我試着設置爲TD colspan=3，但它並不能幫助我。

來源

2013-10-22 MyTitle

回答

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佈局的原因嗎？

來源

2013-10-22 22:04:56 mayabelle

+0

我想'

'在這種情況下非常方便 – MyTitle

+0

您不應該爲此使用表格。表格用於表格。你可以也應該只使用表單元素來創建這樣的表單。 – lexith

+0

@razhial我應該使用'div''來代替表格嗎？或者我不應該使用表格和div？但我將如何做定位表單元素？正如你所看到的，我需要2列的佈局，但對於某些行，我只需要放置1個小部件而不是2個小部件。 – MyTitle

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

來源

2013-10-22 22:08:02 lexith

1

正確的（假設這是合法的表格數據）的方法是添加一個<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"/>

來源

2013-10-22 22:42:36

+0

您剛剛說的所有內容都已經在此頁面上聲明。和66％，是不是退出3/4 – lexith

+0

你是66％部分（OPPS），使用'

'或'