css-tables | 易学教程

HTML and CSS - Vertical align divs

阅读更多关于 HTML and CSS - Vertical align divs

问题 I have a div on the left hand side, and text on the right hand side. The text can be either 2 or 3 lines long, and I want the left hand div to be vertically centered to that text. I've looked online and it seems that all the ways to do this without using tables are complicated. Is there an easy way to do this? Most suggestions seem to point to http://www.jakpsatweb.cz/css/css-vertical-center-solution.html which uses "CSS tables". Are CSS tables the way to go? Is that really better than just

Are scroll bars always the same width in different browsers?

阅读更多关于 Are scroll bars always the same width in different browsers?

问题 I need to make a CSS adjustment to compensate for a scroll bar. So I was wondering- are scroll bars always the same width in different browsers and operating systems? I have two tables, one above the other, with matching columns widths (set to percentages). One table needs a scroll bar, so I want to add another column in the table above it to compensate for it, so the columns line up. 回答1: Scrollbars aren't even counted the same in different browsers, some of them put them inside the frame,

css table - avoid wrapping of table cells

阅读更多关于 css table - avoid wrapping of table cells

问题 I am creating a kind of boardgame in javascript. The images for the board are put inside a table. I used to do this using html <table> tags. However, I got convinced that due to the fact that this table does not really contain data, I should really use <div> elements to visualize it. <div id='board'>  <div class='mytable'>  <div class='myrow'>  <div class='mycell'/> ... </div> ... </div> </div> To

Background repeat only on one side of the site layout, content centered?

阅读更多关于 Background repeat only on one side of the site layout, content centered?

问题 How can I repeat endlessly a background color/image only on one side of my site layout and keep the content centered? The best method seems to be with tables as it will work even in IE6, however is there a method to do this without tables and javascript and be working in at least IE7+? The method with divs/display:table does not work in IE at all, <style type="text/css"> *{ margin:0; padding:0; } /* table method */ .table-container{ margin-top:20px; border:0; border-collapse:collapse; width

Page break before table row

阅读更多关于 Page break before table row

问题 I have a table where I want to force page breaks before certain TR's when printing, so I searched around and found Applying "page-break-before" to a table row (tr), seemed simple enough: set display to block and use page-break-before as usual. However, it doesn't seem to be working (at least not in Chrome 59, Windows). For example: <!DOCTYPE html> <html> <head> <style type="text/css"> tr.break-here { display: block; page-break-before: always; } </style> </head> <body> <table> <tr class="break

Three-row modal with fixed with header, bottom row, and scrollable middle row

阅读更多关于 Three-row modal with fixed with header, bottom row, and scrollable middle row

问题 I am trying to create a modal with a top, middle and bottom. The top is always fixed height. The bottom must be "glued" to the bottom and may vary some. All content and elements inside it must build from the bottom. So if there is one line of text, the bottom will be the height of that line. If there are 3 or 4 lines of text, the bottom will push up as needed. The middle needs to fill up all that is left, and if the content overflow-y 's it must show the scroll bar and not interfere with the

Positioning of div inside display:table-cell in IE 10

阅读更多关于 Positioning of div inside display:table-cell in IE 10

问题 Trying to understand why IE9-10 is choking on something that IE7,8, FF, WK all render as expected. Is there any trick to getting IE 9-10 to correctly respect the inherent height of a 'table cell'. (Important note: due to a variety of reasons I cannot use height:100% on the 'cell' div.) http://jsfiddle.net/swortis/fCn8Y/ HTML: <div class="table"> <div class="row"> <div class="cell"> <div class="wrapper"> <div class="content"></div> </div> </div> </div> </div> CSS: <style> html, body { height:

Google Chrome CSS box model issue: box-sizing + table + 100% height + border

阅读更多关于 Google Chrome CSS box model issue: box-sizing + table + 100% height + border

问题 Take a look at this fiddle (in Google Chrome): http://jsfiddle.net/776uaj5b/1/ <div style="background-color: blue;"> <table style="height: 100px;border-spacing: 0;border-collapse: collapse;"> <tr> <td style="height: 100%;width: 100px;"> <div style="height: 100%;background-color: red;"> BOX1 </div> </td> <td style="height: 100%;width: 100px;"> <div style="height: 100%;background-color: red;border-width: 10px;border-color:green;border-style:solid;box-sizing: border-box;"> BOX2 </div> </td> </tr

CSS table and max-width in Chrome not working

阅读更多关于 CSS table and max-width in Chrome not working

问题 This is my CSS code; #wrap { width:50em; max-width: 94%; margin: 0 auto; background-color:#fff; } #head { width:50em; height:10em; max-width: 100%; margin: 0 auto; text-align:center; position: relative; } #css-table { display: table; margin: 1em auto; position: relative; width:50em; max-width: 100%; } #css-table .col { display: table-cell; width: 20em; padding: 0px; margin: 0 auto; } #css-table .col:nth-child(even) { background: #fff; } #css-table .col:nth-child(odd) { background: #fff;

Table TR with background-size bug Safari

阅读更多关于 Table TR with background-size bug Safari

问题 Look at this fiddle, he will work different on safari and chrome: https://jsfiddle.net/sew120xt/1/ Desired look (chrome): https://i.stack.imgur.com/q9ABs.png Bugged look (safari): https://i.stack.imgur.com/Sc6YF.png Seems like Safari will treat the style for TR as a style for his childrens instead, is there a fix for that? 回答1: You seem to be correct that it is a bug. It isn't just the element <tr> itself but any element displayed as a table-row in a table displayed element. I've replicated