Solved

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

Posted on 2014-11-06
1
344 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

This article discusses four methods for overlaying images in a container on a web page
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

691 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