只使用css/scss使td元素與輸入元素具有相同的寬度？

Question

我曾試過在沒有任何運氣的情況下提出這個問題，所以我會再試一次。我真的希望有人能夠幫助。

我想是：

• 表拉伸到100％
• 所述第一輸入元件到「補」的表，因爲表具有100％
• 其他輸入元件要以不同的尺寸
• 的TD爲相同的寬度，所述輸入元件（沒有空格）
• 僅改變的CSS（無JS，沒有HTML改變）
來實現這一

在下面的代碼片段中，您可以看到我的html表格。我不想以任何方式改變它，我不想添加任何類。我不想使用任何JavaScript。

如果您運行代碼段，您可以看到我的問題。 td比輸入元素寬得多。我希望第二，第三和第四個td「縮小」到輸入元素的大小。我想要第一個td出來（因爲表必須是100％）。

table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 

 
td { 
 
    border: 1px solid #000; 
 
} 
 

 
.small { 
 
    width: 20px; 
 
} 
 

 
.medium { 
 
    width: 40px; 
 
}

<table> 
 
<tbody> 
 
    <td> 
 
    <div> 
 
     <input type="text" /> 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     <input class="small" type="text" /> 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     <input class="medium" type="text" /> 
 
    </div> 
 
    </td> 
 
    <td> 
 
    <div> 
 
     <input class="medium" type="text" /> 
 
    </div> 
 
    </td> 
 
</tbody> 
 
</table>

我知道這可以通過設置在TD元素與其使用的輸入寬度來解決，但是這不是我要求的。我也知道它可以通過將表格的寬度設置爲auto來解決，但這不是我想要的。我只想要td元素只與使用css的輸入元素具有相同的寬度。

Answer 1

這是你想達到的目的嗎？我將第一個td和輸入設置爲width: 100%;，以便在所有div的其餘部分都是其中的元素寬度（由您的類設置）後，它們將填充表格的其餘部分。用box-sizing: border-box你可以設置它，以便邊框等對元素的寬度沒有影響。您還可以將box-sizing屬性僅設置爲表格，並將其所有元素設置爲table * { box-sizing: border-box; }。

* { 
 
    box-sizing: border-box; 
 
} 
 
table { 
 
    width: 100%; 
 
    border-collapse: collapse; 
 
} 
 
td { 
 
    border: 1px solid #000; 
 
} 
 
table td:first-child, 
 
table td:first-child input { 
 
    width: 100%; 
 
} 
 
.small { 
 
    width: 20px; 
 
} 
 
.medium { 
 
    width: 40px; 
 
}

<table> 
 
    <tbody> 
 
    <td> 
 
     <div> 
 
     <input type="text" /> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div> 
 
     <input class="small" type="text" /> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div> 
 
     <input class="medium" type="text" /> 
 
     </div> 
 
    </td> 
 
    <td> 
 
     <div> 
 
     <input class="medium" type="text" /> 
 
     </div> 
 
    </td> 
 
    </tbody> 
 
</table>