You need to declare a height first, else your table will expand to the according width of its content. table{ overflow-y:scroll; height:100px; display:block; } EDIT: after clarifying your problem I edited the fiddle: check out this Example or that way. It’s rather hacky and not guaranteed to work crossbrowser but might work for your case.
Note: It’s not just max-width:0, it’s any width less than the text content’s width. The mixture of display: table-cell, max-width, and width:100% make an interesting situation that the specifications don’t explicitly cover. However, by making some observations and thinking, we can understand why we have the same behavior across all major browsers. max-width:0 tries to … Read more
Just apply the .beta class selector to the entire table and change your CSS code to apply a rule only to td decedents of .beta like this: <table class=”beta”> <tr> <td>…</td> <td>…</td> </tr> </table> .beta td { border-style:solid; border-top:thick double #ff0000; } If you need to apply the rule to multiple elements within .beta simply … Read more
Use transform scale(1,1) property with box-shadow it will solve the problem. tr:hover { transform: scale(1); -webkit-transform: scale(1); -moz-transform: scale(1); box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.3); } Fiddle: https://jsfiddle.net/ampicx/5p91xr48/ Thanks!!
Since you are treating this as a table, where the elements stay in the same row, you can also wrap each row in a DIV with “display” set to “contents.” This forms an innocuous parent element that you use for hover, and then style the child elements. (display: contents is not yet supported in Edge, … Read more
Add a class to every cell in the 2nd column. .second { text-align: right; } You could also use CSS3. tr td:nth-child(2) { /* I don’t think they are 0 based */ text-align: right; } (It won’t work in <= IE8)
After days trying to find the answer, I finally found display: table; There was surprisingly very little information available online about how to actually getting it to work, even here, so on to the “How”: To use this fantastic piece of code, you need to think back to when tables were the only real way … Read more
NOTE this answer is now incorrect. I may get back to it at a later time. As others have pointed out, you can’t set the height of a table unless you set its display to block, but then you get a scrolling header. So what you’re looking for is to set the height and display:block … Read more
You just need to add ‘table-layout: fixed;’ .table { display: table; height: 100px; width: 100%; table-layout: fixed; } http://www.w3schools.com/cssref/pr_tab_table-layout.asp
What you need to do is to put your wrapper div (the one with display: table-cell) inside another div that has display: table and table-layout: fixed. That makes both Firefox and Opera respect the max-width rule. See this example on jsFiddle.