Сделать td элементом такой же ширины, что и входной элемент, используя только css/scss?

Question

Я постарался задавать этот вопрос раньше, но мне не повезло, поэтому я попробую снова его спросить. Я действительно надеюсь, что кто-то может помочь.

Что я хочу:

• стол, чтобы растянуть на 100%
• первый вход элемента «заполнить» таблицу, так как таблица должна быть на 100%
• другие элементы ввода чтобы быть в различных размерах
• ТДА, чтобы иметь такую ​​же ширину, как входные элементы (без пробела)
• для достижения этой цели только с изменением 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 элементов insteadof на входе, но это не то, что я прошу. Я также знаю, что это можно решить, установив ширину таблицы в auto, но это не то, что я хочу. Я просто хочу, чтобы элементы td были одинаковой ширины, чем входные элементы с использованием только css.

Answer 1

Это то, чего вы хотели достичь? Я установил первый td и input, чтобы иметь width: 100%;, чтобы они заполнили остальную часть таблицы после того, как все остальные divs - это ширина элементов внутри него (задана вашим классом). С помощью 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>