asked on

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

Dave Baldwin

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.

Ankit Pareek

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

cookiejar

ASKER

Mr. Dave Baldwin,

If all the experts had your demeanor, I would definitely cancel my account with Experts Exchange.

cookiejar

ASKER

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.

cookiejar

ASKER

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

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cookiejar

ASKER

Thank you for your help!

Julian Hansen

You are welcome.