Html table fixed row height

How can I force all rows in a table to have the same height

I am trying to build a html table but I want to force all rows to have the same height (no matter how much content is in the cells). If a cell overruns the space, I want it to just cut off the text and hide the rest. Is this possible using CSS, etc?

A small follow up question. Is it possible to have a table where all rows have the same height, but the height is automatically calculated? In other words, all rows are as tall as the tallest row needs to be to accommodate its content?

4 Answers 4

IE only

 #fixedheight < table-layout: fixed; >#fixedheight td

  
 
 
content
 
lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such
 
more content
 
small content
 
enough already
 
 
 

Universal solution

 #fixedheight < table-layout: fixed; >#fixedheight td < width: 25%; >#fixedheight td div

     
content
  
lots of content that should spend way more time wrapping down than it should if I were just to have a short bit of stuff, that would be invaded by zombies and the such
  
more content
  
small content
  
enough already
    

i tried this but it doesn’t seem to make it smaller in height than what fits with the content. een if height: 1px. if there are 3 rows of data (after wrapping), it still shows all 3 rows. it seems that overflow:hidden doesn’t seem to be taken affect. i am using firefox

I did a bunch of research and there is a solution in IE, but not for other browsers. I’ve updated the example with IE compliment code and universal code.

Источник

Fixed height of table row in html

I have a table hosted in a div. Neither the table nor the hosting div has a height specified. After the table header row, each subsequent row looks like this:

I want each table row (except for the header) to have the same fixed height but I just can’t get it to work after hours of trying all kinds of approaches (and of course searching on stackoverflow and elsewhere). My css (in less syntax) looks like this:

.movie-info-row < height: 240px; p < margin-top: 2px; margin-bottom: 2px; >td < height: 100%; overflow: hidden; >> .movie-cover < border: 1px solid black; width: 130px; height: 100%; overflow: hidden; >.movie-details < border: 1px solid black; height: 100%; overflow: hidden; >.movie-file < font-size:larger; >.movie-div-left < float: left; width: 40%; vertical-align: top; display: inline-block; >.movie-description-container < display: inline-block; float: right; width: 60%; overflow: hidden; vertical-align: top; >.movie-description

As you can see I have fixed the height of the row to 240px and for good measure have each td height set to 100% with overflow hidden. The trouble maker is the description text, which can be quite long and it messes with the table row height. As you can see I have set overflow to hidden in many places (which is probably overkill). Note: This is not browser specific. I am not even using IE. I am testing it with firefox and chrome (both latest versions). I am really at a loss. What am I doing wrong? Any help would be greatly appreciated. ETA: Here’s a picture of a table row as it looks now: SampleRow As you can see the description text takes the row height with it. I want it limited to a fixed height — basically the hight of the title image. And yes, I want all the information (with more to come) in there. So that is non-negotiable.

Источник

How to adjust table row height in HTML5

I’ve looked through the site, and haven’t been able to find anything that addresses this particular question as it relates to html5. Though it’s always possible I overlooked it. How do I get a row height of 1px in a table using html5? The following code works as expected in html 4.01 (I’ve thrown in everything including the kitchen sink in an attempt to get the row height to be just 1px in html5, with background colors added to show the table row):

It displays as you would expect, as a 1 pixel high row. But if I use the identical code with a doctype of:

It displays as a 6 pixel tall row. The top 5 pixels with the background color of red, and then the 1 pixel high image line. (I would have posted actual images, but I’m new here, and StackOverflow won’t let newbies post images.) The problem appears identical in the latest versions of Firefox, Chrome, & IE, so I expect I’m missing something. Any suggestions would be much appreciated.

Источник

Setting table row height

The rows are spaced too far apart. I want the lines closer together. What I did was to add the following CSS but it doesn’t seem to change anything.

11 Answers 11

I don’t understand why this has so many votes, it doesn’t resolve the problem. It only works if you only have 1 line of text in the tr . This solution sets the line height, not the tr height.

As mentioned in a later comment. the height has to be bigger than the height of your largest content. Otherwise, it will just use the height of the largest content as the minimum height. And yes, this only works for one line of text.

try setting the attribute for td so:

seriously? I thought this would always have worked. it certainly does now. anyway this is the solution I found to be best since the way table cells work is to expand to their content. so height in a td is effectively min-height, which in this case is actually what you want

@dave In my case also only @dave ‘s solution worked. line-height did not work either with tr or td . Not sure if it has something to do with the timing since the original post is six years old and some of html/css rules may have changed by now as most of the browsers are now using HTML5.

Also, in my experience, if you set a height on tr and then a 100% height or any height on the td inside it, I believe the system thinks that the height is set on the td and it doesn’t follow height of the tr and the row is set to the default height. So just set the height on the td. This is the reason I upvoted this answer

Источник

How to fix height of TR?

Is it possible to fix the height of a row (tr) on a table? The problem appears when I shrink the window of the browser, some rows start playing around, and I can not fix the height of the row. I tried several ways: tr width=»20″ / tr style=»height:20px» / td height=»20″ / td style=»height:20px» I am using IE7 Style

.tableContainer < color:#0076BF; margin: -10px 0px -10px 0px; border-spacing: 10px; empty-cells:show; width:90%; text-align:left; >.tableContainer tr td

 
 
NHS Number
 
 
 
Date of Visit
 
 
 
Care Time Started
 
 
 
☑
 
Tick when 
care starts
 
 
 
 
 
 
 
 
 
 
 
 
:
 
 
 
 
 
 
 

7 Answers 7

Tables are iffy (at least, in IE) when it comes to fixing heights and not wrapping text. I think you’ll find that the only solution is to put the text inside a div element, like so:

td.container > div < width: 100%; height: 100%; overflow:hidden; >td.container

 
 
 
This is a long line of text designed not to wrap when the container becomes too small.
 
 
 

This way, the div ‘s height is that of the containing cell and the text cannot grow the div , keeping the cell/row the same height no matter what the window size is.

I’ve did the same method, putting a div inside a

tag and it worked well. I had this issue only on Chrome. FFox, Safari and IE supported well the height set on the table header. Thanks for sharing! 🙂

doesn’t work in safari. you need to set the actual height and width on the div as well, not only the td

Try putting the height into one of the cells, like this:

Note however, that you won’t be able to make the cell smaller than the content requires it to be. In that case you would have to make the text smaller first.

Setting the td height to less than the natural height of its content

Since table cells want to be at least big enough to encase their content, if the content has no apparent height, the cells can be arbitrarily resized.

By resizing the cells, we can control the row height.

One way to do this, is to set the content with an absolute position within the relative cell, and set the height of the cell, and the left and top of the content.

table < width: 100%; >td < border: 1px solid #999; >.set-height td < position: relative; overflow: hidden; height: 3em; >.set-height p < position: absolute; margin: 0; top: 0; >/* table layout fixed */ .layout-fixed < table-layout: fixed; >/* td width */ .td-width td:first-child

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Foo
Bar
Baz
Qux
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
 
With table-layout: fixed applied:
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Foo
Bar
Baz
Qux
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 
 
With <td> width applied:
 
 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Foo
Bar
Baz
Qux
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 

The table-layout property

The second table in the snippet above has table-layout: fixed applied, which causes cells to be given equal width, regardless of their content, within the parent.

According to caniuse.com, there are no significant compatibility issues regarding the use of table-layout as of Sept 12, 2019.

Or simply apply width to specific cells as in the third table.

These methods allow the cell containing the effectively sizeless content created by applying position: absolute to be given some arbitrary girth.

Much more simply.

I really should have thought of this from the start; we can manipulate block level table cell content in all the usual ways, and without completely destroying the content’s natural size with position: absolute , we can leave the table to figure out what the width should be.

table < width: 100%; >td < border: 1px solid #999; >table p < margin: 0; >.cap-height p

 
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
Foo
 
 
Bar
 
Baz
 
 
Qux
 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 
 

Источник