Solved

CSS to fix the width of the second column of a table

Posted on 2014-11-06
1
312 Views
Last Modified: 2014-11-07
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

0
Comment
Question by:Bevos
1 Comment
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 40427120
It is unbelievable that anyone is still back in the 20th century using a table to layout a form instead of using form specific structures.  However if you are going to use ancient methods I suppose we can manage it with a couple of simple declarations:

td:nth-of-type(1) {width:50px;}
td:nth-of-type(2) {width:250px;}

Just change the widths to whatever values you need.

Good luck you will need it for the maintenance issues you are creating by using tables for layout management.

Cd&
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

911 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now