我可以使用輸入元素填充表列的寬度嗎？

我想要一個input [type = text]元素始終與它所包含的表格單元具有相同的寬度。我需要確保表格單元的寬度不受輸入元素寬度的影響。我可以使用輸入元素填充表列的寬度嗎？

我該怎麼用CSS做這件事？我需要使用JS嗎？如果是這樣，確定何時表格單元更改大小的最佳方法是什麼？

2011-12-23 diolemo

我想你應該給你的答案一些評論，如果你想要更好的答案，特別是因爲我們需要了解我們是否正確地解決你的問題。 – 2011-12-23 15:49:12

如何設置樣式（或類）寬度：100％;用於表內的輸入元素？

事情是這樣的：

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

來源

2011-12-23 05:35:34

CSS應該做的伎倆：

#my_input { 
    width: 100%; 
} 

#my_table { 
    table-layout:fixed; 
}

來源

2011-12-23 05:37:20

如果這樣做對你的工作：

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

試試這個：

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

來源

2011-12-23 05:42:08 jerjer

「寬度：100％」適用於我，但「顯示：阻止」不適用。 – Muflix 2015-11-27 07:58:23

將字段的寬度設置爲100％應該可以工作。在這種情況下，您還需要添加box-sizing規則以避免輸入字段忽略表格單元填充。

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

見例如http://jsfiddle.net/MEARG/

來源

2011-12-23 06:57:38 dfsq

設置CSS規則width:100%;和display:block;爲INPUT元素應該這樣做。

實際上，這還不夠，似乎有些瀏覽器強調INPUT的size屬性。例如，Chrome擴大了元素以符合大小，從而擴大了表格列。設置size=0不起作用，因爲它默認爲某個有效值。但是，在INPUT元素上設置size=1屬性可實現所需的行爲。然而，這不是純CSS的解決方案，並且INPUT不能被壓縮到一定的寬度以下。

來源

2012-03-03 17:12:52 dronus

我可以使用輸入元素填充表列的寬度嗎？

回答

相關問題