Link to home
Start Free TrialLog in
Avatar of Bevos
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)?

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

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of COBOLdinosaur
COBOLdinosaur
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial