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!!
ya as your html is same you can change the styles for the css properties according to the media query a better solution would be- fiddle @media only screen and (min-width: 769px) { #content { border:1px solid; border-collapse:collapse; } #content td, #content th { border:1px solid; text-align:left; padding:.07em .2em; white-space:nowrap; font-weight:400; } } @media only … Read more
This is the result of the automatic table layout algorithm as implemented by the browser. This can vary across browsers because the CSS2.1 spec doesn’t specify all auto layout behavior, but it does outline an algorithm commonly used by browsers with HTML tables, because the CSS table model is based on the HTML table model … Read more
Everything works as expected until I add “position: absolute”. Now it can’t place my content in the middle any more? Why not? position: absolute forces display: block, read number two here. As for a workaround, I think you’ll have to wrap it in another element: <div class=”table-cell-wrapper”> <div class=”table-cell”> My text, should be align middle … Read more
When you use % for setting heights or widths, always set the widths/heights of parent elements as well: .table { display: table; height: 100%; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; height: 100%; } .container { height: 100%; border: 2px solid green; -moz-box-sizing: border-box; } <div class=”table”> <div class=”cell”> <p>Text <p>Text … Read more
I’ve solved this using jQuery: $(document).ready(function(){ if ($.browser.msie && $.browser.version == 7) { $(“.tablecell”).wrap(“<td />”); $(“.tablerow”).wrap(“<tr />”); $(“.table”).wrapInner(“<table />”); } }); the above script assumes you have divs using style such as: <style> .table { display: table; } .tablerow { display: table-row; } .tablecell { display: table-cell; } </style>
You have to wrap it in a div, that will work: <table border=”1″ style=”table-layout:fixed; width:500px”> <tr> <td style=”width:100px;”><div style=”overflow:scroll; width:100%”>10000000000000000000000000000000000</div></td> <td>200</td> <td>300</td> </tr> </table>
You can use border-spacing property: HTML: <div class=”table”> <div class=”row”> <div class=”cell”>Cell 1</div> <div class=”cell”>Cell 2</div> </div> </div> CSS: .table { display: table; border-collapse: separate; border-spacing: 10px; } .row { display:table-row; } .cell { display:table-cell; padding:5px; background-color: gold; } JSBin Demo Any other option? Well, not really. Why? margin property is not applicable to display: … Read more
/* cellpadding */ th, td { padding: 5px; } /* cellspacing */ table { border-collapse: separate; border-spacing: 5px; } /* cellspacing=”5″ */ table { border-collapse: collapse; border-spacing: 0; } /* cellspacing=”0″ */ /* valign */ th, td { vertical-align: top; } /* align (center) */ table { margin: 0 auto; }
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