SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Use the <col> element to style input fields in a column

    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 */
    }


    HTML Code:
    <table class="boxTest">
      <tr>
        <th scope="col" class="sp20"><label>First Last Name</label></th>
        <th scope="col" class="sp2"><label>Age</label></th>
        <th scope="col" class="med sp8"><label>Relationship<br/>self, parent, brother, sister, etc.</label></th>
        <th scope="col" class="sp20"><label>College</label></th>
        <th scope="col" class="med sp5"><label>Will be Enrolled <br /><span class="xxsm">at Least 6 credit hours?</span><br /><span class="xxsm">Yes or No</span></label></th>
      </tr>
     
      <tr>
      	<td class="ex">Martha Jones (ex)</td>
      	<td class="ex">18</td> 
        <td class="ex">Self</td>
      	<td class="ex">Cisco College</td>
        <td class="ex">Yes</td>
      </tr>
    
      <tr>
        <td>&nbsp;<input name="tf4" type="text" id="tf4"  /></td>
        <td>&nbsp;<input name="tf5" type="text"  id="tf5"   /></td>
        <td>&nbsp;<input name="tf6" type="text"  id="tf6"   /></td>
        <td>&nbsp;<input name="tf7" type="text" id="tf7"  /></td>
        <td>&nbsp;<input name="tf8" type="text" id="tf8"    /></td>
      </tr>
    
      <tr>
        <td>&nbsp;<input name="tf9" type="text"  id="tf9"   /></td>
        <td>&nbsp;<input name="tf10" type="text" id="tf10"   /></td>
        <td>&nbsp;<input name="tf11" type="text" id="tf11"    /></td>
        <td>&nbsp;<input name="tf12" type="text" id="tf12"   /></td>
        <td>&nbsp;<input name="tf13" type="text" id="tf13"   /></td>
      </tr>
      
      <tr>
        <td>&nbsp;<input name="tf14" type="text"  id="tf14"  /></td>
        <td>&nbsp;<input name="tf15" type="text" id="tf15"  /></td>
        <td>&nbsp;<input name="tf16" type="text" id="tf16"    /></td>
        <td>&nbsp;<input name="tf17" type="text" id="tf17"  /></td>
        <td>&nbsp;<input name="tf18" type="text" id="tf18"   /></td>
        </tr>
      <tr>
        <td>&nbsp;<input name="tf19" type="text"  id="tf19"   /></td>
        <td>&nbsp;<input name="tf20" type="text" id="tf20"   /></td>
        <td>&nbsp;<input name="tf21" type="text" id="tf21"    /></td>
        <td>&nbsp;<input name="tf22" type="text" id="tf22"  /></td>
        <td>&nbsp;<input name="tf23" type="text" id="tf23"    /></td>
        </tr>
      <tr>  
        <td>&nbsp;<input name="tf24" type="text"  id="tf24"  /></td>
        <td>&nbsp;<input name="tf25" type="text" id="tf25"  /></td>
        <td>&nbsp;<input name="tf26" type="text" id="tf26"   /></td>
        <td>&nbsp;<input name="tf27" type="text" id="tf27"  /></td>
        <td>&nbsp;<input name="tf28" type="text" id="tf28"   /></td>
        </tr>
    <tr>
        <td>&nbsp;<input name="tf29" type="text"  id="tf29"   /></td>
        <td>&nbsp;<input name="tf30" type="text" id="tf30"  /></td>
        <td>&nbsp;<input name="tf31" type="text" id="tf31"    /></td>
        <td>&nbsp;<input name="tf32" type="text" id="tf32"  /></td>
        <td>&nbsp;<input name="tf33" type="text" id="tf33"   /></td>
        </tr>
     </table>
    This is my css
    Code:
    .boxTest {
    	border:1px solid black;
    	border-collapse:collapse;
    	margin-top:10px;
    	margin-bottom:10px;
    		}
    .boxTest th {
    	border:1px solid black;
    	border-collapse:collapse;
    	vertical-align:text-top;
    	font-size:85%;
    	line-height:95%;
    	}		
    .boxTest td {
    	border:1px solid black;
    	border-collapse:collapse;
    	line-height:90%;
    		}
    .boxTest td.ex {
    	border:1px solid black;
    	border-collapse:collapse;
    	line-height:90%;
    	font-style:italic;
    	text-align:center;
    	background-color:#c0c0c0;
    		}
    .boxTest th.lg {
    	border:1px solid black;
    	border-collapse:collapse;
    	vertical-align:text-top;
    	font-size:100%;
    	line-height:1.75;
    	}	
    .boxTest th.l {
    	border:1px solid black;
    	border-collapse:collapse;
    	vertical-align:text-top;
    	font-size:85%;
    	line-height:1.75;
    	}
    .boxTest th.med {
    	border:1px solid black;
    	border-collapse:collapse;
    	vertical-align:text-top;
    	font-size:60%;
    	line-height:95%;
    	}
    	
    .boxTest col.sp2 input{
    	width:2em;
    	background-color:red;}

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    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?

  3. #3
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
      <tr>
        <td class="border">&nbsp;<input name="tf4" type="text" id="tf4" class="sp20" /></td>
        <td class="border">&nbsp;<input name="tf5" type="text"  id="tf5"  class="sp5" /></td>
        <td class="border">&nbsp;<input name="tf6" type="text"  id="tf6" class="sp10" /></td>
        <td class="border">&nbsp;<input name="tf7" type="text" id="tf7" class="sp20" /></td>
        <td class="border">&nbsp;<input name="tf8" type="text" id="tf8" class="sp5" /></td>
      </tr>

  4. #4
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Ok,

    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:

    .boxTest td:nth-child(2) input{
    width:2em;
    background-color:red; }

    Most modern browsers understand this, and IE9+
    other wise you could do this:

    .boxTest td:first-child + td input{
    width:2em;
    background-color:red; }

    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{...}

    hope that helps.

  6. #6
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yes this is exactly what I needed.

    thanks for the heads up on the Tr class="ex".

    I really appreciate your investment of time.

    One last question... can I use both of these declarations for better browser support, or will I be creating mayhem?

    .boxTest td:nth-child(2) input

    .boxTest td:first-child +td input

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,801
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    not so much mayhem, but redundant.

    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 {}

  8. #8
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thanks again for your help.

  9. #9
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Is there a way to center the input in the table cell?

    Code:
    .college td:nth-of-type(5) input {
    	width:6em;
    	margin-left:auto;
    	margin-right:auto;
    	}
    I tried margin:auto; but that idi not work. My code looks good in Chrome, but the input field is too narrow in FF and IE.

  10. #10
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    The contents of a table cell are centered with text-align:center
    Code:
    .college td:nth-of-type(5) {
        width:6em;
        text-align:center;
    }

  11. #11
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is true for text within a table cell, however, I am trying to center the <input> field within the table cell.

    text-align:center does not work for centering the input field., but thanks so much for your response.

  12. #12
    SitePoint Enthusiast
    Join Date
    Apr 2010
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My apologies.... I had to add your code to my original code. Thanks so much, this is the solution I was looking for.
    Code:
    .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  */


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •