css-tables

问题 Here's the table cell: https://developers.google.com/+/web/share/#sharelink-sizes As you see when you use the inspect element feature in Chrome or Firefox, the total width and height of the table cell is calculated as 105px × 85px. However, the cell content (image) is only 64px × 64px and the cell padding is 6px 10px 6px 10px. I don't see any width and height properties in the element style, so where does this extra width and height come from? 回答1: It's a table cell, so the browser will

问题 I'm creating templates for a Django project, and I need to create a three column table in HTML, using just CSS, rather than a <table> element. The reason, apart from any ideological opposition to tables, is that the report needs to be viewed on both desktops as well as handheld devices such as BlackBerry. On handhelds, rather than trying to force three columns on a minuscule screen, the objective is to break up the table into a series of consecutive paragraphs. Previously, I'd hacked a quick

问题 I have a layout using table cells. I know, using tables is quite out-dated, but I needed it for this one to make each row the same height without using absolute values for their height See this fiddle or this draft. I needed the .wrapper div, to display the .infobox correctly in firefox. Before that, I had the .infobox set as 100% height (with position absolute) which worked fine on chrome, since the parenting td -element had position:relative . I want the hover-effect to be applied to the

问题 I'd like the there to be 4 or so pixel space between each cell. I'd like the grey header to have the spaces rather then a block of grey. I tried playing around ( background-clip:padding-box; padding: 14px; margin etc) but couldn't figure out how to put a few pixels between cells in a div table. How do I do this? Demo of problem http://jsfiddle.net/EJBnm/ <div class="TableBox"> <div> <div>Head</div> <div>Bigger Head</div> <div>Medium</div> </div> <div> <div>First</div> <div>Second</div> <div

问题 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> 回答1: 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.

问题 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

问题 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? 回答1: You need a more specific selector to override... BP is pretty general though so that shouldnt be an issue

问题 I am outputting a list of products in Magento, as a simple list wrapped in a table. As this list can get quite long (100 products+), I've used the ideas from here to automatically split the table into two, to help with readability etc. #container { column-count:2; -moz-column-count:2; -webkit-column-count:2; } However, this method just flows the table into 2 columns. Does anyone know how I can get the table header to also repeat in the second column? Using the linked answer, you can see this

问题 I've got a long div container set to display:table and & divs within it set to display:table-cell; vertical-align: middle . I'm really happy with the results of vertical alignment, but: I don't know the width of these 3 divs, I want one of them to be on the very right side of div container (minus padding of course), float: right doesn't work with display: table-cell . Here's an example (I want to float the golden divs to the right). I can't use JS. I need it to work in IE7+, or IE8+ if

问题 I like to get my table behave like a block element. I cannot set it to width:100% because it does have some padding, this is going to result 100% + the paddings PX. Check out: http://jsfiddle.net/LScqQ Finally the table does what I want, can you see the box-shadow? But the table children don't like it that way^^ I guess the TH inside the THEAD are the problem. They do not get the aspected ratio of 66% to 33%. Help wanted... 回答1: Your table should be display: table . If you're worried about