Tôi có thể có một yếu tố đầu vào điền vào chiều rộng của một cột trong bảng không?

Question

Tôi muốn phần tử đầu vào [type = text] luôn có cùng chiều rộng với ô bảng được chứa. Tôi cần đảm bảo rằng chiều rộng của ô bảng không bị ảnh hưởng bởi chiều rộng của phần tử đầu vào.

Tôi có thể làm điều này bằng CSS như thế nào? Tôi có cần sử dụng JS không? Nếu vậy, cách tốt nhất để xác định khi nào ô bảng thay đổi kích thước?

Answer 1

Điều gì về việc thiết lập chiều rộng kiểu (hoặc lớp): 100%; cho các yếu tố đầu vào bên trong một bảng?

Something như thế này:

td input.myclass[type=text] 
{ 
    width: 100%; 
} 

Answer 2

CSS nên làm các trick:

#my_input { 
    width: 100%; 
} 

#my_table { 
    table-layout:fixed; 
} 

Answer 3

nếu điều này không làm việc cho bạn:

td > input[type='text'] 
{ 
    width: 100%; /*this will set the width of the textbox equal to its container td*/ 
} 

thử điều này:

td > input[type='text'] 
{ 
    display:block; /*this will make the text box fill the horizontal space of the its container td*/ 
} 

Answer 4

Đặt chiều rộng trường của bạn thành 100% sẽ hoạt động. Trong trường hợp này, bạn cũng sẽ muốn thêm quy tắc box-sizing để tránh trường nhập từ bỏ qua các ô đệm bảng.

td.value input { 
    width: 100%; 
    box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
} 

Xem ví dụ http://jsfiddle.net/MEARG/

Answer 5

quy tắc Setting CSS width:100%; và display:block; cho các phần tử INPUT nên làm điều đó.

Trong thực tế, điều đó là chưa đủ, có vẻ như một số trình duyệt nhấn mạnh mức độ size của INPUT trên phong cách. Vì vậy, ví dụ: Chrome mở rộng phần tử để đồng ý với kích thước, do đó mở rộng cột bảng. Cài đặt size=0 không hoạt động vì nó được đặt mặc định thành một số giá trị hợp lệ. Tuy nhiên, đặt thuộc tính size=1 ở phần tử INPUT đạt được hành vi mong muốn. Tuy nhiên, đây không phải là giải pháp chỉ CSS và không thể nén INPUT dưới một chiều rộng nhất định nhưng nhỏ.