Solved

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

Posted on 2014-11-06
1
317 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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

773 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