I am using tables for my tabular forms. The width of the input fields determine the width of the columns. I am looking for a simple way to style a column other than setting the width in each input.
I used The CSS Anthology to create this style. It does not work with the input element
.boxTest col.sp2 input{
width:2em;
background-color:red; /* for testing */
}
I am confused by the request itself as it seems “circular”
The width of the input fields determine the width of the columns.
By this very goal it means you must set the width of the input element.
Or did you mean you wanted the width of the column to determine the width of the input?
If I set the column width, it has no effect. I must set the width of the input field to have an effect on the column width. The following code achieves the desired results, however, it is time consuming.
In The CSS Anthology, pg. 157 it discussed setting color for alternating columns. I wanted to use that process to set the width for the input fields in the column. I don’t know if this is possible.
I’ve also tried setting the width of the<td>. That has no effect either. The only way to get the columns the correct width was to style the input field width.
you problem stems from the way you have structured your selector , and you are missing a concept about tables.
TABLES:
dont actually have “columns”, tho there is a COL tag, you didnt use it your HTML. ALSO the COL tag doesnt have children , thus you cant target anything via: col sometag{…} It’s just the unfortunate was HTML tables work.
if you did this :
.boxTest input{
width:2em;
background-color:red; }
you’d see the rules are applied just fine. Of course now the problem is that the rule is too general and ALL inputs become red and 2em wide.
Depending on the range of browser support you need, and your SPECIFIC HTML CODE, you can target the desire input via an existing attribute OR a markup pattern.
For example, I see that the TD which contains the input is the second TD in each row, so I could do this:
which is a little more cumbersome , but offer broader support
failing that you are going to need to put a class on the input.
speaking of avoiding tedium:
instead of class=“ex” on all TDs in the second row, why not just give the TR class=“ex” then your CSS rules would be: .ex td{…}
if you are honestly concerned about earlier versions of IE use: .boxTest td:first-child + td input{}. It has the wider support ( IE7+ , I think), but it 's messier to write.
For example if you were targeting the fourth TD you’d have to write this:
.boxTest td:first-child + td +td+td {},
as opposed to:
.boxTest td:nth-child(4) input {}
Thank you for that clarification.
I will use the nth-child
The minority of users with older browsers will have to deal with a table that expands beyond the border of the wrapper.
My apologies… I had to add your code to my original code. Thanks so much, this is the solution I was looking for.
.college td:nth-of-type(5) input {
width:6em;
} /* sets the width of the input cell, thus sets the width of the column */
.college td:nth-of-type(5) {
width:6em;
text-align:center;
} /* centers the input in the table cell */