Can CSS over-rule HTML input size declarations - html

Question

I have inherited a website that has many inputs on various pages, such as:
<input name="name" type="text" id="name" size="40" maxlength="64">
and
<textarea name="descr" cols="40" rows="2" id="descr">
I have been improving the CSS of the site to make it flexible layout for mobile devices, etc. But the size/cols rules of the HTML persists in setting the fixed size, regardless of outside factors.
I have tried using CSS such as:
CSS:
input, textarea, select {
max-width:100%;
}
(And with also appending !important) but this doesn't effect the elements.
It's been converted into an HTML5 template, and the inputs are in a table (but the table is flexible and is not the issue).
Is there a way that CSS can overwrite the HTML size/cols declaration in the inputs?
The large number of inputs over multiple pages wanted me to find a CSS simple way of overwriting them all in one fell swoop. As far as I can see this doesn't seem directly possible and I will have to go through and edit the size values for each input elements :-/.
EDIT
Full Code:
HTML:
<table id='centralTable'>
<tr>
<td colspan="2">Update Category</td>
</tr>
<tr>
<td width="28%"><strong><label for='name'>Category Name</label></strong></td>
<td width="70%"><input name="name" type="text" id="name" value="catname" size="40" maxlength="40" required></td>
</tr>
<tr>
<td><input name="id" type="hidden" id="id" value="12" >
</td>
<td><input type="submit" value="Update" ></td>
</tr>
</table>
CSS:
#centralTable {
width:90%;
max-width:780px;
min-width:300px;
margin:1rem auto;
}
input, textarea, select {
max-width:100%;
}
If I adjust the sizing of the size value, the other elements on the page fit the screen as intended, but the size value offsets this. Firebug shows that max-width is applied to the element but the element size does not accord to this.
EDIT TWO:
Setting the td element max-width to a px value rather than a percentage works, but obviously doesn't adapt to viewport size.
td {
max-width:200px; /* This works in containing the input size */
}

Answer 1

CSS can override the size attribute using width. There's a good explanation about it here.
Here, we have a typical input, size 10:
<input type="text" size="10">
And here is that same input, adjusted with CSS
input {
width: 20px;
}
<input type="text" size="10">
max-width is also a viable option, depending on the circumstance
div {
width: 20px;
}
input {
max-width: 100%;
}
<div>
<input type="text" size="10">
</div>

Answer 2

OK, I think I've got it:
The table elements are set to take a percentage size but the nature of tables is that they expand to fit their contents, and the contents is set to take a maximum of 100% of the table size, so:
Size sets input elements size:
Table cell expands to encase input element
CSS input sets the input to fill table cell
So; Using a Viewport Width as a value gives a more absolute container for the size to sit into.
#centralTable input, #centralTable textarea, #centralTable select {
max-width:65vw;
}
This limiter, rather than a percentage limiter, then correctly resizes the child input size value.
Viewport width units should be used in preference to percentage sizes.