css-tables

问题 I'm trying to get the text to be on the right side and vertically center aligned with the image. How can I do that? My current code: <div style="display: table;"> <div style="display: table-cell;"><img src="//dummyimage.com/100"></div> <div style="display: table-cell;">text</div> </div> 回答1: use CSS3 Flexible Box Layout: from the documentation: providing for the arrangement of elements on a page such that the elements behave predictably when the page layout must accommodate different screen

问题 I'm trying to style a table so that each row is a different colour (odd/even). I have the following CSS: #woo tr:nth-child(even) td { background-color: #f0f9ff; } #woo tr:nth-child(odd) td { background-color: white; } However, some of my rows can be hidden and I'd still like the rows to alternate. How can I adjust the above so it gives the appearance of alternate rows, even if the rows that are next to each others aren't necessarily odd and even? 回答1: If you are using jQuery, you can employ

问题 According to MetalFrog's answer to this problem I'm trying to fit a cell width to its content: tr td.fit { width: 1%; white-space: nowrap; } This works pretty well as seen here (jsfiddle). However by adding a twitter-bootstrap button group to a cell that should fit the width to its content the buttons will wrap down between them still. jsfiddle. How can I prevent my buttons to get wrapped down? I still want to keep them in one line. EDIT I want to keep the table width 100%, so removing 1%

问题 I'm trying to make a CSS table that (for layout purposes) has a caption at the top and bottom. Unfortunately, as far as I can tell, display: table-caption merges everything into a single space at the top. This means that only the "header" caption is actually displayed. I've tried treating them as rows instead, but for some reason, their widths bind to that of the first table column. (Am I doing something wrong here?) The same happens if I make them regular div s with their widths set to 100%

问题 Duplicate of: Why not use tables for layout in HTML? DIV’s vs Tables or CSS vs. Being Stupid Theres been a lot of talk lately about rather using div than table tags to make your pages more browser fiendly. Why is div better? 回答1: a few reasons: 1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is

问题 Duplicate of: Why not use tables for layout in HTML? DIV’s vs Tables or CSS vs. Being Stupid Theres been a lot of talk lately about rather using div than table tags to make your pages more browser fiendly. Why is div better? 回答1: a few reasons: 1) div is more semantically correct in most cases. people who code their sites in table structure aren't using tables for what they're made for, which is tabular data. divs represent a "division" or a section of the page, so putting items in divs is

问题 I use this CSS code to display a database output in rows where the colors repeat in every 2nd row tbody tr:nth-child(2n) td, tbody tr.even td { background: none repeat scroll 0 0 #E5ECF9; } If I open it in my IE it won't work. Any advice? I am using IE 8. 回答1: IE8 does not support the :nth-child CSS property. You can make it work in IE8 with this script: https://github.com/roylory/ie7-js How to use it: You can Include it via conditional comments, e.g.: <!--[if lte IE 9]> <script src="IE9.js">

问题 I normally use CSS rules for margin:0 auto along with a 960 container for my standard browser based content, but I'm new to HTML email creation and I've got the following design that I'd like to now center in the browser window without standard CSS. http://static.helpcurenow.org/mockups/emails/2010/may-survey/survey.html I seem to recall seeing somewhere that it can also be accomplished by wrapping your email table design in an outer table set to width:100% and using some inline style for

问题 I have a table with many rows on my page. I would like to set table's height, say for 500px, such that if the height of the table is bigger than that, a vertical scroll bar will appear. I tried to use CSS height attribute on the table , but it doesn't work. 回答1: 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

问题 Here is 2 column markup using display: table and display: table-cell CSS declarations: .table { display: table; } .cell { border: 2px solid black; vertical-align: top; display: table-cell; } .container { height: 100%; border: 2px solid green; } <div class="table"> <div class="cell"> <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text <p>Text </div> <div class="cell"> <div class="container">Text</div> </div> </div> But .container block does not fill parent cell vertically. Here is an