Change the width of one cell in CSS

Is it possible to make the width of only one table cell (td)  to be a different width of the other cells?  I have a hyperlink within a td tag which is mimicking a button and would like it's width to be smaller.  Please see my attached code to understand what I am doing.
Rating.zip
cookiejarAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Dave BaldwinFixer of ProblemsCommented:
I don't know the answer to your question.  But you keep posting ZIP files and I know that I will never download them and open them.
0
Ankit PareekOnline MarketingCommented:
Hey you can see this example to customize width of single table cell. I am also not going to open your zip file of code you can share code directly with question for better result.
<col style="width: 3em;"/>
 <col style="width: 1em;"/>
 <col style="width: 5em;"/>
 <col style="width: 1em;"/>
 <col style="width: 8em;"/>




<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
      <style type="text/css">
          table {
              border-collapse: collapse;
          }

          td {
              border: solid 1px;
          }

        td.nest {
            padding: 0px;
        }

        td.nest table td {
            border-width: 0px 1px;
        }

        td.nest table td:first-child {
            border-left: none;
        }

        td.nest table td:last-child {
            border-right: none;
        }
    </style>
</head>
<body>

    <table >
        <colgroup>
            <col style="width: 3em;" />
            <col style="width: 1em;" />
            <col style="width: 5em;" />
            <col style="width: 1em;" />
            <col style="width: 8em;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
    </table>

</body>
</html>

Open in new window

0
cookiejarAuthor Commented:
Mr. Dave Baldwin,

If all the experts had your demeanor, I would definitely cancel my account with Experts Exchange.
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

cookiejarAuthor Commented:
Ankit,

I am a newbie who is trying to grasp CSS. Could you explain what td.nest does? is it referring to a class?  Thank you for making we aware of .zip files are not acceptable formats to upload which I can understand why they aren't.
0
cookiejarAuthor Commented:
This is what my code looks like and I would like to change the width of the 3rd cell in fourth row only.
 
<!DOCTYPE html>
<html>

   <head>
  
     <link href="test.css" rel="stylesheet" />	
	 
   </head>
   <body id="body-content">
    	
	 <div style="width:450px" >
	 
	 
	    <section id="review-rating"  >
		  <table class="star-rating">
			<tr>
			   <td id="five-stars"></td>
			   <td class="alnright"">(20)</td>	
                           <td rowspan="2" id="narrative">
			         Want to leave a review? 
				 Whether it is a warning or a suggestion,
		                 We hope you'll leave a review!
                          </td>				 		   
	            </tr>
		    <tr>
			<td id="four-stars"></td>
			<td class="alnright">(5)</td>	
			<td></td>
		</tr>
		<tr>
		   <td id="three-stars"></td>
		  <td class="alnright">(11)</td>	 
                   <td></td>				
		</tr>
		<tr>
		    <td id="two-stars"></td>
		    <td class="alnright">(0)</td>	
		   <td id="getReview">  <!-- this the cell whose width I would like to be smaller -->
		           <a href="#getReviews" >Click here to leave a review!</a>			
		    </td>
		</tr>
		<tr>
		    <td id="one-star"></td>
		   <td class="alnright">(9)</td>	
		   <td></td>
		</tr>			
         </table>      
    </div>    	
  </body>
</html>

CSS file code:

/*  Table styles  */

table.star-rating {
	font-weight: bold;
   	padding: 5;
	margin: 0;
	border-spacing: 3px;
       border-collapse: separate;
}

table.star-rating td {	
	padding-right: 0px;
}

.alnright {             /* Right align second cell of the table */
	text-align: right;
	width: 5px;
}

#getReview {
	text-align:center;	
	border: 1px solid black;
        background-color: rgb(51,24,250);
       color: white;	
}

#getReview a {
	color: white;
	text-decoration: none;
}
	
#five-stars, #four-stars, #three-stars,
#two-stars, #one-star{
	width: 85px;
}		

#five-stars  {
 background: url(fivestars.png)  no-repeat; 
}

#four-stars  {
 background: url(fourstars.png)50% 50% no-repeat; 
}

#three-stars{
  background: url(threestars.png) 50% 50% no-repeat; 
}

#two-stars{
  background: url(twostars.png) 50% 50%  no-repeat; 
}


#one-star {
  background: url(onestar.png) 50% 50%  no-repeat; 
}

Open in new window

0
Julian HansenCommented:
You can make the cell smaller but that would affect all cells in that column.

Your options are

Style the <a> instead of the <td> in other words move the background and border styles to the <a> like so
#getReview a {
  background: blue none repeat scroll 0 0;
  border: 1px solid black;
  color: white;
  text-decoration: none;
}

Open in new window


The other alternative is to break the cell up into smaller bits either by inserting another table (not a great idea) or by changing the number of cells in that column for the whole table and using colspan for the preceding rows (also not a great idea).

Using tables for layout is not a generally accepted practice. However, you have already gone down that road so I would go with option 1 - styling your <a> to look the way you want it to look and leave the <td> width as is.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
cookiejarAuthor Commented:
Thank you for your help!
0
Julian HansenCommented:
You are welcome.
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.