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!!
You can use the following: <style type=”text/css”> table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } </style> Refer the W3C’s CSS Print Profile specification for details. And also refer the Salesforce developer forums.
The CSS table model is based on the HTML table model http://www.w3.org/TR/CSS21/tables.html A table is divided into ROWS, and each row contains one or more cells. Cells are children of ROWS, they are NEVER children of columns. “display: table-column” does NOT provide a mechanism for making columnar layouts (e.g. newspaper pages with multiple columns, where … Read more
If it is resolved by using a different font (Arial) then the issue is with the font, not with the CSS. As you have noticed font rendering differs between browsers. One possible solution could be to download the Cutive font (I see it has a SIL license) and then run it through the Font Squirrel … Read more
Unfortunately, the effect of percentage values for height on display: table-row and display: table-cell elements is undefined according to the spec: CSS 2.1 does not define how the height of table cells and table rows is calculated when their height is specified using percentage values. So while a browser may claim to offer full support … Read more
This is what the THEAD element is for. Official docs here.
Equal Height Columns with Flexbox HTML <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> </ul> CSS ul { display: flex; } With the simple code above, you can put any amount of content in a list item, and all list items will have equal height. DEMO Notes: An initial setting of a flex container is flex-direction: … Read more