tss 요소를 css/scss만을 사용하여 입력 요소와 동일한 폭으로 만드시겠습니까?

Question

나는 다시 물어 보려고 노력하기 때문에 전에이 질문을하려고 노력했다. 누군가가 도울 수 있기를 바랍니다.

내가 원하는 것은 : 테이블이 100 %

다른 입력 요소를 될해야하기 때문에

• 테이블은 테이블을 "채우기"100 %
• 첫 번째 입력 요소에 스트레칭 다른 크기
• TD를 판정하는
• 만 CSS (NO JS없이 HTML 변경)
변화로이를 달성 할 입력 요소와 동일한 폭 (공백없이) 될

아래 코드 스 니펫에서 내 HTML 테이블을 볼 수 있습니다. 나는 그것을 어떤 식 으로든 변경하고 싶지 않고 어떤 수업도 추가하고 싶지 않습니다. 나도 자바 스크립트를 사용하고 싶지 않아.

코드 스 니펫을 실행하면 내 문제가 발생할 수 있습니다. 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>