How to make all controls of a column the same width

Hi I need to know if there's any way of making all controls of a column the same width, and that all these controls are as wide as the cells that contain them.

I added a demo on JSFiddle with the controls I'm using. I tried using size for the input texts and style="width:"> for the selects , and even though I managed to make them the same width开发者_运维问答,(it doesn't seem to work in Chrome) it's kinda difficult , that's why I'd like to know if there is any more straightforward way to do the same thing

Any ideas or insights?

Give them all a class that makes them stretch to 100% width (e.g. class="element") and put them in a div with 30% width. OR define a class with the property "width: 30%". You can define classes in a seperate css file or a style tag in the head of your page. css:

.element{
   width: 100%;
}

div.container{
 width:  30%
}

html

<div class="container">
  <whatever class="element">...stuff.....</whatever>
  <sample class="element">...more stuff...</sample>
</div>