Bevos
asked on
CSS to fix the width of the second column of a table
Good afternoon, I'm editing a form on Formsite and trying to use some Custom CSS to make some of the elements look uniform.
Namely, the form has multiple tables which were being fit to size. Because these tables are all related it was very distracting while scrolling through the form. I edited the CSS to make these uniform in size, but unfortunately a new issue cropped up.
All tables have two columns: Description and a checkbox. The description can be rather long and the checkbox is obviously not. However, when I made the table widths uniform both columns take up equal space on the screen. Can anyone please show me how to edit the CSS to fix the 'checkbox' column width at something more manageable (like 50 or 100px)?
Namely, the form has multiple tables which were being fit to size. Because these tables are all related it was very distracting while scrolling through the form. I edited the CSS to make these uniform in size, but unfortunately a new issue cropped up.
All tables have two columns: Description and a checkbox. The description can be rather long and the checkbox is obviously not. However, when I made the table widths uniform both columns take up equal space on the screen. Can anyone please show me how to edit the CSS to fix the 'checkbox' column width at something more manageable (like 50 or 100px)?
<style type="text/css" media="all">
body{
background: #CFE5F4;
font-family: Frutiger, "Frutiger Linotype", Univers, Calibri, "Gill Sans", "Gill Sans MT", "Myriad Pro", Myriad, "DejaVu Sans Condensed", "Liberation Sans", "Nimbus Sans L", Tahoma, Geneva, "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.form_table{
width: auto;
margin-left: auto;
margin-right: auto;
border: 2px solid #FFFFFF;
background: #FFFFFF;
color: #000000;
overflow: hidden;
border-radius: 10px;
}
.form_table a{
color: #0000FF;
}
.outside a{
color: #0000FF;
}
.form_table a:visited{
color: #0000FF;
}
.outside a:visited{
color: #0000FF;
}
.form_shadow_top{
display: block;
}
.form_shadow_bottom{
display: block;
}
.segment_header{
margin: 1px;
padding: 22px 0 18px 0;
color: #FFFFFF;
background: #0099CC;
width: auto;
background-repeat: repeat;
border-radius: 10px;
}
.q{
padding: 10px;
margin-bottom: 1px;
margin-left: 1px;
float: left;
display: block;
}
.q .question{
font-weight: bold;
}
.q .left_question_first{
width: 15em;
}
.required .icon{
background-image: url(/images/icons/formIcons/requiredExclamation.png);
background-position: left;
background-repeat: no-repeat;
font-size: 13px;
padding-left: 14px;
}
.q .text_field{
border: 1px solid #AA272F;
color: #000000;
margin: 1px 0;
padding: 2px;
background: #FFFFFF url(/images/forms/field_bg.png) -4px -4px;
border-radius: 8px;
font-size: 13px;
}
.q .file_upload{
background: #F4F4F4;
border: 1px solid #AA272F;
color: #000000;
margin-top: 1px;
border-radius: 8px;
font-size: 13px;
padding: 2px;
}
.q .file_upload_button{
margin-top: 2px;
}
.q .inline_grid td{
padding: 5px;
vertical-align: baseline;
}
.q .drop_down{
background: #FFFFFF url(/images/forms/field_bg.png) -4px -4px;
border: 1px solid #AA272F;
color: #000000;
margin: 1px 0;
padding: 1px;
border-radius: 8px;
font-size: 13px;
}
.q .matrix th{
color: #FFFFFF;
background: #8FCAE7;
padding: 5px;
font-weight: bold;
width: 1000px;
text-align: center;
vertical-align: bottom;
}
.q .matrix td{
padding: 5px;
text-align: center;
white-space: nowrap;
height: 26px;
border-bottom: 1px solid #FFFFFF;
border-top: 1px solid #FFFFFF;
}
.q .matrix td.question{
border-right: 1px solid #FFFFFF;
font-weight: normal;
}
.q .matrix .multi_scale_sub th{
font-weight: normal;
border-top: 1px solid #FFFFFF !important;
background: #005172;
}
.q .matrix .multi_scale_break{
border-right: 1px solid #FFFFFF;
}
.q .matrix_row_dark td{
color: #000000;
background: #BED6DB;
}
.q .matrix_row_dark td.question{
color: #000000;
background: #BED6DB;
}
.q .matrix_row_light td{
color: #000000;
background: #DCD6B2;
}
.q .matrix_row_light td.question{
color: #000000;
background: #DCD6B2;
}
.q .rating_ranking td{
padding: 5px;
}
.q .scroller{
border: 1px solid #FFFFFF;
}
.highlight{
background: #FFFFFF !important;
}
tr.highlight td{
background: #FFFFFF !important;
}
.outside{
color: #000000;
}
.outside_container{
width: auto;
padding: 1em 0;
margin-left: auto;
margin-right: auto;
text-align: center;
color: #000000;
}
.outside_container .submit_button{
color: #FFFFFF;
background: #0593D1;
border-style: none;
border-width: 3px;
border-color: #FFFFFF;
border-radius: 8px;
padding: 10px 20px;
}
.outside_container .submit_button:hover{
border-color: #BBBBBB;
}
.outside_container .progress_bar{
background: #0099CC;
margin: 0;
}
.ui-widget{
font-family: Lucida Grande,Tahoma,Arial,sans-serif;
}
.invalid{
background: #FFEEEE;
}
.invalid .invalid_message{
color: #FF0000;
background: #FFEEEE;
border: 1px solid #FF0000;
border-radius: 3px;
}
.form_table.invalid{
border: 2px solid #FF0000;
}
.invalid .matrix .invalid_row{
background: #FFEEEE;
}
</style>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.