第二個td在可編輯表格中的固定寬度

我想爲我的可編輯表格固定寬度，但我也想爲每個TD設置不同的寬度。在我嘗試，我能夠得到設定在固定寬度的表，但是這會導致TD的寬度似乎是50％而不是80％ - 20％，我設置了固定的寬度第二個td在可編輯表格中的固定寬度

CSS有過

table { 
    margin: 15px 0; 
    border: 1px solid black; 
    table-layout: fixed; 
    width: 100%; 
} 
.fixed td:nth-of-type(1) {width:20%;} 
.fixed td:nth-of-type(2) {width:80%; text-align: left;} 
.fixed { 
margin:0px;padding:0px; 
width:100%; 

    border:1px solid #000; } 
.fixed td { 
margin:0px;padding:0px; 
width:100%; 
    border:1px solid #000; }

HTML

<div class="fixed" contenteditable="true"> 
<table> 
    <tbody> 
<tr> 
      <td colspan="2">Header:</td> 

</tr> 
     <tr> 
      <td>Name:</td> 
      <td><br/></td> 
</tr> 
     <tr> 
      <td>DOB::</td> 
      <td><br/></td> 
</tr> 
     <tr> 
      <td>Comments:</td> 
      <td><br/></td> 
</tr> 

     </table>

我缺少什麼？如果它有幫助，請檢查this Fiddle。通過輸入足夠的內容來嘗試一下，看看它在某個點之後自動進入下一行。

來源

2014-10-29 Twaret

與您的代碼的問題是，您的第一個<tr>有colspan="2"。所以，當你給width:100%給表中的所有TD時，css將不會按照你的需要應用到底層TD。

你的解決方案是將頭TD分離：<td colspan="2">Header:</td>到一個單獨的表（參照HTML-1的下方）或把底層的TD在同一TR作爲標題的（參考HTML-2的下方）。

也改變CSS和簡化它，就像我下面做的那樣。你寫了很多不必要的CSS。

Working Fiddle Here

這裏是我的嘗試。試試這個：

HTML-1：

<table class="fixed" > 
    <tbody> 
    <tr> 
     <td colspan="2">Header:</td> 
    </tr> 
    </tbody> 
</table> 
<table class="fixed" > 
    <tbody> 
    <tr> 
     <td>Name:</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>DOB::</td> 
     <td>tes</td> 
    </tr> 
    <tr> 
     <td>Comments:</td> 
     <td>test</td> 
    </tr> 
</table>

HTML-2：

<table class="fixed" > 
<tbody> 
    <tr> 
     <td colspan="2">Header:</td> 
    <tr> 
     <td>Name:</td> 
     <td>test</td> 
    </tr> 
    <tr> 
     <td>DOB::</td> 
     <td>tes</td> 
    </tr> 
    <tr> 
     <td>Comments:</td> 
     <td>test</td> 
    </tr> 
</tr> 
</tbody> 
</table>

簡化CSS：

table { 
    margin: 0 0; 
    width: 100%; 
    table-layout: fixed; 
} 

.fixed td:nth-of-type(1) {width:80%;} 
.fixed td:nth-of-type(2) {width:20%; text-align: left;} 

.fixed td { 
margin:0px;padding:0px; 
border:1px solid #000; }

來源

2014-10-29 06:24:57

謝謝，我很欣賞這種迴應。但是，這也是我被卡住的地方，這使我可以將表格寬度更改爲80％ - 20％，但是它使得它不是真正固定的寬度。如果你想測試，輸入所有的信息，你可以進入第二個TD並看到它永遠持續下去，並不會停下來去下一行。我更新了，所以你可以在這裏測試[小提琴]（http://jsfiddle.net/zu3dudbk/6/） – Twaret 2014-10-29 06:30:30

@Twaret我已經更新了我的答案。看看這是否有助於你。 – 2014-10-29 06:34:52

@Twaret至於永遠持續的信息文本，它會發生，因爲您的表是100％寬度。如果你想要真正固定的寬度，那麼你應該給表一個確定的寬度，而不是100％。給表格寬度爲500px或700px。如果你給100％將總是採取100％寬度的屏幕尺寸或父元素，它會不斷擴大寬度直到屏幕尺寸。 – 2014-10-29 06:40:25

你有錯誤，我n你的html語法，儘管這與問題無關。看看你是否需要類似this fiddle。

table { 
 
    margin: 15px 0; 
 
    border: 1px solid black; 
 
    
 
    width: 100%; 
 
} 
 
.fixed td:nth-of-type(1) {width:20%;} 
 
.fixed td:nth-of-type(2) {width:80%; text-align: left;} 
 
.fixed { 
 
margin:0px;padding:0px; 
 
width:100%; 
 

 
    border:1px solid #000; } 
 
.fixed td { 
 
margin:0px;padding:0px; 
 
width:100%; 
 
    border:1px solid #000; }

<div class="fixed" contenteditable="true"> 
 
<table> 
 
\t <tbody> 
 
<tr> 
 
\t \t \t <td colspan="2">Header:</td> 
 
\t \t \t 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>Name:</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>DOB::</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
\t \t <tr> 
 
\t \t \t <td>Comments:</td> 
 
\t \t \t <td><br/></td> 
 
</tr> 
 
    </tbody> \t 
 
    </table></div>

否則您將無法實現參數td寬度，所有的TD將有一列相同的寬度。您可以使用colspan屬性作爲解決方法。

來源

2014-10-29 06:35:40 vedbhawsar

第二個td在可編輯表格中的固定寬度

回答

相關問題