css-tables | 易学教程

Centered table-like layout with columns of equal widths using CSS?

阅读更多关于 Centered table-like layout with columns of equal widths using CSS?

问题 On a web page, I have a row of submit buttons. This row of buttons should be centered on the page Each button should be as wide as the widest button (i.e no fixed/hard-coded button widths). This is easily done with a <table> , but as people keep telling me those are bad for you, I wondered if this can be done with CSS instead. So, I have tried the display: table and table-cell CSS classes, but either the buttons don't get equal widths, or the longest button's caption gets clipped: .button-row

CSS Transition with Tables

阅读更多关于 CSS Transition with Tables

问题 I have multiple tables which are in one row. When one is selected , it should expand one (until now hidden) column. When it is deselected , it should shrink slowly. I tried it with an CSS Transition, but when there is no text in the cell, the shrinking doesn't work. .column2 { background-color: #ddd; width: 0em; overflow: hidden; -webkit-transition: max-width 1.5s ease ; -moz-transition: max-width 1.5s ease ; transition: max-width 1.5s ease ; max-width: 0em; } table.focus .column2{ -webkit

Unwanted row space in TABLE

阅读更多关于 Unwanted row space in TABLE

问题 I have a table which contains a segmented picture. Picture is segmented due to adding mouse over effect on some parts of picture. Although the stand-alone version is OK, when integrated to WordPress as a side bar HTML code, becomes messy ( cell-padding changes). Since I have no control over the parent control (here a DIV ) how can I override parent CSS from my HTML code (without changing WordPress side-bar PHP code). 回答1: There is a line-height: 21px; in your stylesheet. Remove that it looks

How would I convert this table layout to divs/css?

阅读更多关于 How would I convert this table layout to divs/css?

问题 I'm really trying to work with div's and I can't seem to get the equivalent to the following simple table layout: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <title>Table example</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <style type="text/css"> html, body {height: 100%} .content {width: 750px; vertical-align: top} <

Since box-shadow cannot be used on display:table-row elements, how can I mimic a table and use box-shadow on the pseudo-row elements?

阅读更多关于 Since box-shadow cannot be used on display:table-row elements, how can I mimic a table and use box-shadow on the pseudo-row elements?

问题 It's already been confirmed that it's not possible to add a box-shadow to a display:table-row element in a way that's compatible with all the major browsers. For reasons that boggle my mind, a row cannot be styled as a group, which means you can't add a box-shadow to an entire row in a display:table and can only add it to the individual display:table-cell elements, which then creates vertical shadowing in-between cells which I don't want. So how can I mimic a table whereby the width of the

Aligning images in a row with text below each image

阅读更多关于 Aligning images in a row with text below each image

问题 In short, I'm trying to achieve a design similar to this: Where the white boxes are images, and the red brushes are lines of text (the top line would hold a name and underneath their specialty) but using divs has proven to be problematic as I can't get the content to line up in a proper row - I'm not too keen on using a table for something like this due to compatibility problems, so I'm hoping someone on here would be able to assist me in trying to get it to work with divs before I fall back

Chrome displaying table-cell with 0 width as 1px

阅读更多关于 Chrome displaying table-cell with 0 width as 1px

问题 In Firefox (correctly, I believe), no red div is seen due to width: 0 but in Chrome, it is displayed as having 1px width. This seems like an issue with recent versions of Chrome. This fiddle shows the issue. The code is: <div id="wrapper"> <div></div> </div> #wrapper { background: yellow; height: 100px; width: 100px; } #wrapper div { display: table-cell; height: 100px; width: 0px; background: red; } Does anyone know why this happens or a workaround? 回答1: Chrome (and other webkit-based

min-width isn't preferred strongly enough when child is a table

阅读更多关于 min-width isn't preferred strongly enough when child is a table

问题 My previous question got an answer using min-width to set the width of a containing block but allow it to grow when its children are too big. This worked fine with some kinds of children (simple divs with their own min-width and max-width specified explicitly). Now I'm looking at a more complex variation in which the children are tables. (Legitimate tables with semantically meaningful rows and columns, not page-layout tables.) There is no manually-specified min-width or max-width on these

Inline-block DIVs fill table cell in Chrome, but not other browsers?

阅读更多关于 Inline-block DIVs fill table cell in Chrome, but not other browsers?

问题 I have a small issue. After figuring out how to get some DIVs nested inside of a table cell to all fit at 100%, depending on the height of the table row, I noticed it doesn't work in Firefox or IE. Instead of trying to explain, here's the page: http://www.faganarms.com/testcategory.aspx I'm trying to get all of the cells in each row to expand to be the height of that row, depending on it's content. If one row has very small descriptions, it might be shorter in height than one with long

How to vertically align image and text in table cell?

阅读更多关于 How to vertically align image and text in table cell?

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