css-tables

I'm making a layout that looks kind of like this All contained withing a 'table' (display: table) __________________ | S| HEADER | | I|---------------| | D| | | E| CONTENT | | |_______________| | |FOOTER | -------------------- SIDE is a table-cell and HEADER, CONTENT, FOOTER are contained within another table-cell . CONTENT is a div that has overflow-y set to auto, and in Chrome, whenever the content in CONTENT exceeds the initial height, the scrollbar appears and the whole table isn't resized vertically, however, in Firefox, the whole table IS getting expanded vertically, which is not the

I'm trying to put a 100% height div inside a display:table-cell div, but it doesn't seem to work in IE. Any workaround for IE? Here's my code: <div style="display:table-row;"> <div style="display:table-cell; background-color:blue; border-left:solid 1px #CCC;"> <div style="position:relative; height:100%; width:100%; background-color:red;"> </div> </div> </div> I realize this is a fairly old post, however I found myself here looking for a solution. I ended up using a little but of jQuery. ('.column' refers to my :table-cell elements) jQuery(document).ready(function($){ $('.column').each(function

I'm trying to create a website that will adjust the size of table elements table cells relative to the size of the window, so that it will always fit inside the window. Here's what I have: .table { display: table; margin-right: auto; margin-left: auto; width: 100%; } .tablecell { display: table-cell; } <div class="table"> <div class="tablecell"> <image src="fb.png"> </div> <div class="tablecell"> <image src="twitter.png"> </div> <div class="tablecell"> <image src="youtube.png"> </div> <div class="tablecell"> <image src="apple.png"> </div> <div class="tablecell"> <image src="email.png"> </div>

The Blueprint CSS framework makes all table rows of alternating colors by default. How to disable this behaviour for one table? I tried to use Chrome Developer Tools to see all the styles Chrome uses for a defined table, but did not find the style which would set the colors for rows. I also searched the Internet and did not find a solution. It's like magic... Anyone can help me out? You need a more specific selector to override... BP is pretty general though so that shouldnt be an issue for example: table.no-zebra tbody tr:nth-child(even) td, table.no-zebra tbody tr.even td { background:

I am iterating over a list of objects. With each iteration I build and populate a table which contains the content of a single page. I am using CSS to add a page break after each table. table { page-break-after: always; } This works great, except that I am always getting a blank last page. Which I assume is due to the last table iteration applying a page break. I have tried. table { page-break-after: always; } table { page-break-after: auto; } table { page-break-after: left; } table { page-break-after: right; } However, I always get that blank last page. Is there another method of inserting

I am having an issue where my website looks off on an actual mobile device, but when I resize the screen on my computer it looks just fine. This is within an iframe also, and looks fine outside of the iframe on a mobile device. Below is the actual URL, click on search for a player and you wills see the page. http://adidasuprising.com/adidas-grassroots-mens-events/adidas-gauntlet-series/dallas/ UPDATE Looks like someone else has this issue. (Responsive)Table Width does not fit the container inside iframe on ios safari Desktop Resized Google Chrome on iPhone Mike Flynn I fixed it with this from

I am trying to make a table with Vertical Text just on the header table. Here is my CSS code: table th.user { .rotate(90deg); position: relative; padding-top: 190px; top: -10px; right: 0px; width: 200px; } Here is the demo http://codepen.io/anon/pen/GnveJ As you can see it works partially. I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question. Any idea what is the best way to make the css code or js code for this purpose? Requirement: I am using less and jquery

Today it's my first time I'm playing around with tables and I have noticing that the table and tr and td tags have a little space between them, like 1 px or so. So here is my problem : There is my code : <table id="upload_box_container"> <tr> <td class="border_bottom_1px">hi1</td> <td class="border_bottom_1px">hi2</td> </tr> </table> (upload_box_container - it's just background color and border color) (border_bottom_1px - as it's name it only gives bottom border with 1px size) and there is a picture of how it displays: http://postimage.org/image/16wz2ao78/ My question is why there is a space

I want to set a minimum height for tbody in CSS, even if no <tr><td></td></tr> in tbody, here is my code: tbody{ height: 500px; min-height:500px; } but it doesn't work. so what should I do to achieve this? Why you want to do this? Min-height and height applies to block level elements and table isn't a block level element. Wrap your table inside a div (say div.table-wrap) and apply minimum height to that div. If you don't want table layout isn't important to you, then just add display:block to the CSS of tbody. Hope this demo will work for you... Css: tbody{ height: auto; min-height:200px;