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
Solved

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

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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

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

Suggested Solutions

Title # Comments Views Activity
Make Session back to empty 9 30
Asp in script 6 36
Media Queries  not Firing 6 17
html / css issue / div issue. stuck, help needed 2 14
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

840 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