Strange: What you quote looks fine, and should work. Are you sure there is no overriding display: block !important somewhere? But as my opinion, I’m going to say that for the love of God, just use a table. 🙂 Seriously. The main argument for not using tables in such situations is that they aren’t the … Read more
Use border-collapse on your <table> than border-left and border-right on your <td>. table { border-collapse: collapse; } tr { border: none; } td { border-right: solid 1px #f00; border-left: solid 1px #f00; } <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table>
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>
No. It does not need to be used with display: table-row. Read here. table-cell just represents a <td> or <th>: Specifies that an element represents a table cell. And specifically regarding table-cell: For example, an image that is set to ‘display: table-cell’ will fill the available cell space, and its dimensions might contribute towards the … Read more
CSS: table { table-layout:fixed; } Update with CSS from the comments: td { overflow: hidden; text-overflow: ellipsis; word-wrap: break-word; } For mobile phones I leave the table width but assign an additional CSS class to the table to enable horizontal scrolling (table will not go over the mobile screen anymore): @media only screen and (max-width: … Read more
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.
You might want to look at the :first-child pseudo-class (W3C definition) – this is exactly the kind of thing it was designed for. You could use it like this: .table td { text-align: right; } .table td:first-child { text-align: left; } The :first-child pseudo-class means the selector only matches the first <td> in each <tr>. … Read more
Oh well, I looked up for scrollable table with fixed column to understand the need of this specific requirement and your question was one of it with no close answers.. I answered this question Large dynamically sized html table with a fixed scroll row and fixed scroll column which inspired to showcase my work as … Read more
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