只使用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>