CSS HTML

[solved – 5 Answers] Set the table column width constant regardless of the amount of text in its cells

  • In my table set the width of the first cell in a column to be 100px.
  • However, when the text in one of the cell in this column is too long, the width of the column becomes more than 100px. How could you disable this expansion?

  • You need to set the cell width (either th or td worked, I set both) AND set the table-layout to fixed. For some reason, the cell width seems to only stay fixed if the table width is set, too (i think that’s irrelevant but whatever). Also useful is setting the overflow property to hidden.
  • You should make sure to leave all of the bordering and sizing for CSS.
  • The following solution of above problem.
table column width code
<table> 
<tr> 
	<th>header 1</th> 
	<th>header 234567895678657</th> 
</tr> 
<tr> 
	<td>data asdfasdfasdfasdfasdf</td> 
	<td>data 2</td> 
</tr> 

</table>
table column width code
table
{ 
	border: 1px solid black; 
	table-layout: fixed; 
	width: 200px; 
} 
th, td { 
	border: 1px solid black; 
	width: 100px; 
} 

You just add <div> tag inside <td> or<th> define width inside<div>This will works fine.

Example:

table column code


<td><div style="width: 50px" >...............</div></td> 

If you need one ore more fixed-width columns while other columns should resize, try setting both min-width and max-width to the same value.

table column code
Here is the correct code:

Set the td width:
<td width="200" height="50"><!--Contents here--></td>

Set the td width with CSS:
<td style="width:200px; height:50px;">

Set the width again as max and min with CSS:
<td style="max-width:200px; min-width:200px; max-height:50px; min-height:50px; width:20

To achieve this solution is easy, you may need put the CSS values in a class in your style-sheet:

css code
.td_size { 
width:200px; 
height:50px; 
max-width:200px; 
min-width:200px; 
max-height:50px; 
min-height:50px; 
	**overflow:hidden;** /*(Optional)This might be useful for some 		overflow contents*/ 
	}


then:

table style html code
<td class="td_size">

Place the class attribute to any <td> you want.

READ  [ Solved-10 Answers ] CSS - Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery

You need to write this inside the corresponding CSS.

table style html code
table-layout:fixed; 
  • This article provides some of the basic informations on table column width , table width , td width , td html , width , table border html , table height , table column , table style , html table style , table style html , html table width , html table column width , alter column , bootstrap table column width , table width css , how do you change column width to fit the contents , table width in html , width in html , table size in html.

About the author

Wikitechy Editor

Wikitechy Editor

Wikitechy Founder, Author, International Speaker, and Job Consultant. My role as the CEO of Wikitechy, I help businesses build their next generation digital platforms and help with their product innovation and growth strategy. I'm a frequent speaker at tech conferences and events.

X