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.
Putting display:table; inside .outer-wrapper seemed to work… JSFiddle Link EDIT: Two Wrappers Using Display Table Cell I would comment on your answer but i have too little rep 🙁 anyways… Going off your answer, seems like all you need to do is add display:table; inside .outer-wrapper (Dejavu?), and you can get rid of table-wrapper whole-heartedly. … Read more
Only a limited set of CSS properties applies to columns, and text-align isn’t one of them. See “The mystery of why only four properties apply to table columns” for a description of why this is the case. In your simple example, the easiest way to fix it would be to add these rules: #myTable tbody … Read more
.the-table { table-layout: fixed; word-wrap: break-word; } Deprecated (i.e. word-wrap) Add the following styles to your <table> .the-table { table-layout: fixed; over-flow: break-word; } Then you can adjust your layout via-CSS as you wish.