css-tables | 易学教程

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? 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 the issue in the snippet below using non-table elements by changing the display property of each. (will only

CSS table default padding or margin

阅读更多关于 CSS table default padding or margin

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

Table padding not working

阅读更多关于 Table padding not working

问题 I have a table that sits within a parent div full of body text and other content. I have the following CSS which does not seem to work: table {width:100%; padding: 0 50px 0 50px;} When I use margins instead of padding, it works—however, with width:100%, using margins scoots the whole thing out of the parent div. I guess I could reduce the width or specify an exact pixel amount, but the rest of the site scales with screen size and I'd like this to work like that, too. 回答1: There are some

Html table breaking row when printing

阅读更多关于 Html table breaking row when printing

I'm currently having some issues with a table I'm trying to print, if it has more than one page, on the page break, the table row in there is being cropped. I've already tried using table { page-break-inside:auto } and tr { page-break-inside:avoid; page-break-after:auto } , but neither worked. It may be something in conflict with my css? Here's the Jsfiddle with it: Jsfiddle link Change your CSS to this @media print { table.report { page-break-after:auto } table.report tr { page-break-inside:avoid; page-break-after:auto } table.report td { page-break-inside:avoid; page-break-after:auto } table

Table cell box model: extra width and height

阅读更多关于 Table cell box model: extra width and height

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? It's a table cell, so the browser will automatically distribute space among the cells to fill the width of the table. The exact width will depend upon

Different CSS style on odd and even rows

阅读更多关于 Different CSS style on odd and even rows

问题 Is it possible, using only CSS, to set different styles on odd and even rows for a dynamically generated table without myself setting correct style on each row when I iterate the collection? 回答1: I'm not sure this will work cross-browser, i'd prefer jQuery myself, but css-only this should do the trick: tr:nth-child(even) { ... } tr:nth-child(odd) { ... } 回答2: You can use the nth-child selector http://reference.sitepoint.com/css/pseudoclass-nthchild, though it is not supported by all browsers.

Creating three-column table with CSS only? (No table element)

阅读更多关于 Creating three-column table with CSS only? (No table element)

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/dirty template out using the Less framework ( http://lessframework.com/ ). {% for category in article

Can I replace <table border=1>' with `<table>` + css: `table{…}`?

阅读更多关于 Can I replace ' with `` + css: `table{…}`?

问题 table{border:1px solid #000;} doesn't seem to work without the border=1 statement. In the same way as changing <input width=30> into input{width:400px;} , I would like to use <table> and declare the border in css only. Is that possible? Update my mistake was using table{border-width:1px;} instead of e.g. table{border:1px solid #000;} --which works fine. 回答1: Use this CSS: table { border-collapse: collapse } td { border: 1px solid #000 } Live Demo border-collapse: collapse is important;

How to make a div inside a table cell “height: 100%”

阅读更多关于 How to make a div inside a table cell “height: 100%”

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 whole table cell but I'm desperate to figure out, how. I only want to use relative values (like em or %)

Make background for table rows extend past the bounds of the table

阅读更多关于 Make background for table rows extend past the bounds of the table

I'm currently trying to create a table with zebra striping where the background color for the stripes stretches the full length of the screen but the actual contents of the row stay within the bounds of the table. More specifically, I'm using Bootstrap, so what I'd like is for the contents of the table row act as if they're inside a .container . In essence, I'm trying to create a table which acts like the following: <table class="table"> <tr> <div class="container"> <td>Testing</td> <td>Testing</td> </div> </tr> <tr> <div class="container"> <td>Testing</td> <td>Testing</td> </div> </tr> <