Try using the overflow CSS property. There are also separate properties to define the behaviour of just horizontal overflow (overflow-x) and vertical overflow (overflow-y). Since you only want the vertical scroll, try this: table { height: 500px; overflow-y: scroll; } EDIT: Apparently <table> elements don’t respect the overflow property. This appears to be because <table> … Read more
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
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
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>
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
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.
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