Your support helps keep the web site running ! We earn a referral fee for some of the services we recommend on this foliate. Learn more

Adjusting Table Column Width

The width assign, now deprecated, was once the adjust means to adjust the width of a table ’ sulfur column. By nonpayment, a browser will adjust postpone columns to fit the contents of the table. however, if you want to control the width of each column, you can do so by adjusting the width of each

or

of a one row. Let ’ s see how this used to be done with the width impute and then we ’ ll look at how the same thing can now be done with CSS. But first, we need a baseline to compare against .

   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that we might even need a line break.

As you can see, in this beginning encase we haven ’ deoxythymidine monophosphate applied any CSS or attributes. What will the browser do with this table ?

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

As you can see, the browser gave the moment column a lot more space than it gave the first. now, let ’ s try the like thing, but use the width impute to force the column to be the lapp size .

   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that we might even need a line break.

In both cases, your browser should give each column the same width. however, the first gear mesa should auto-size to fit the available space while the second will have a fixed width .

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that we might even need a line break.

That ’ s a set nice. unfortunately, it besides isn ’ thymine valid HTML since the width impute has been deprecated. however, we can do the lapp thing with some simple CSS .

 
   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that it will require a line break.

Let ’ s see what our browser does with this board using CSS preferably than the width property :

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

.equal-width td { width : 50 % ; }

Adjustable Table Row Height

Another property closely related to width is height. This property has besides been deprecated, so you shouldn ’ metric ton use it, but angstrom long as we ’ rhenium talking about adjusting column width we should cover adjusting quarrel altitude american samoa well. hera ’ s how you would have done this in the past with the deprecate assign : 

   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that it will require a line break.

And here ’ s what your browser does with that information .

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

Since this assign has been deprecated, we should show you how to do the same thing with CSS. hera ’ s how you ’ vitamin d do it :

 
   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that it will require a line break.

Your browser should render this code in a way that is about identical to the effect of the width impute. Let ’ s see if it does :

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

.tall-row td { altitude : 200px ; } To be honest, I ’ m not certain why ’ five hundred you want to control row acme. It makes a set more sense to control the gross profit and padding around the contents of the

component and let the browser automatically set the row stature based on that information. here ’ s how you could apply that strategy : 

 
   
     Thin     Really Really Really Wide   
   
     Little     Lots and lots and lots and lots of content, so much that it will require a line break.

What this act of CSS does is add 80 pixels of padding above and below each

element and 10 pixels of padding on the leave and right of each

element. here ’ s the result :

Thin Really Really Really Wide
Little Lots and lots and lots and lots of content, so much that it will require a line break.

.tall-row td { pad : 80px 10px ; }

Learn More About Styling Tables

Tables present a large issue of styling challenges to web developers. To learn more about HTML tables and how to style them, take a look at our tables tutorial .