css-tables | 易学教程

Table with only vertical lines visible

阅读更多关于 Table with only vertical lines visible

问题 I need a way to show only the vertical lines in a table. I've tried to add border-left and border-right, both with :1px solid #red;, to both the table and the separate td's. but it won't add the border color. So what I'm looking for is an easy way to create these vertical lines. 回答1: Use border-collapse on your <table> than border-left and border-right on your <td> . table { border-collapse: collapse; } tr { border: none; } td { border-right: solid 1px #f00; border-left: solid 1px #f00; }

Create diagonal border of a cell

阅读更多关于 Create diagonal border of a cell

问题 I wonder if it is even possible creating a table with diagonal border line using css or jquery just like below: Any ideas will be appreciated. 回答1: Anything is possible if you fiddle around with it long enough, here's an example using some creative borders and a lot of CSS: .arrow_box:after, .arrow_box:before { top: 100%; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } FIDDLE And another one using CSS3 rotate: -webkit-transform: rotate

Alternate rows in one column only - CSS

阅读更多关于 Alternate rows in one column only - CSS

问题 How do I color alternate rows in only one column in my table? What's the code for that? 回答1: As @afranz409 stated, the ideal solution would be to create a class. However, this can be done with a CSS specific solution, with limited browser capabilities (None of the IE browsers < 9): table tr:nth-child(2n) > td:nth-child(1) { background-color: #eee; } In other words, for every alternate row, within the first table column, fill the background color #eee . As seen on JsFiddle. For a more cross

Applying CSS to Google Visualization Table

阅读更多关于 Applying CSS to Google Visualization Table

问题 I have created a table in Google Visualization which uses the following code: <html> <head> <script type='text/javascript' src='https://www.google.com/jsapi'></script> <script type='text/javascript'> google.load('visualization', '1', {packages:['table']}); google.setOnLoadCallback(drawTable); function drawTable() { var cssClassNames = { 'headerRow': 'headerRow', 'tableRow': 'tableRow'}; var options = {'allowHtml': true, 'cssClassNames': cssClassNames, 'alternatingRowStyle': true}; var data =

Applying CSS to Google Visualization Table

阅读更多关于 Applying CSS to Google Visualization Table

Adjusting table cell width

阅读更多关于 Adjusting table cell width

问题 Let's take 4 table columns - ID , Text , Date , Action . In my case table have always constant width - in example 960px. How can I create such table as : *-*------------------------------------*----------*----* |1| Some text... |May 2011 |Edit| *-*------------------------------------*----------*----* |2| Another text... |April 2011|Edit| *-*------------------------------------*----------*----* As we can see, ID , Date and Action adjust their width to content, Text is as long as possible....

Is the collapsing border model's implementation in web browsers valid?

阅读更多关于 Is the collapsing border model's implementation in web browsers valid?

问题 I have been trying to understand this excerpt from CSS 2.2 specification for a while with no success (the bold selection is mine): UAs must compute an initial left and right border width for the table by examining the first and last cells in the first row of the table. The left border width of the table is half of the first cell's collapsed left border, and the right border width of the table is half of the last cell's collapsed right border. If subsequent rows have larger collapsed left and

CSS Equivalent of Table Rowspan with Fluid Height

阅读更多关于 CSS Equivalent of Table Rowspan with Fluid Height

问题 I'm trying to accomplish the following using CSS: <table border="1" width="300px"> <tr> <td rowspan="2">This row should equal the height (no fixed-height allowed) of the 2 rows sitting to the right.</td> <td>Here is some sample text. And some additional sample text.</td> </tr> <tr> <td>Here is some sample text. And some additional sample text.</td> </tr> </table> The examples I've seen for accomplishing this utilize fixed heights or allow the content to wrap around the left column. Is there

3 columns, middle one with flexible width

阅读更多关于 3 columns, middle one with flexible width

问题 I'd like to have a layout that consist of three adjacent divs. Side divs have static width (it may change via javascript) and center div fills a remaining area. When the first div's size changes it affect only the center one. It is similar to table (with dynamic rendering) that consist of three columns. Ok, but where is the problem. The problem is that if I put floating-left div into the first column, and block div in the second and third one, block divs behave in a strange way. They are

How to add box-shadow to a CSS div with display:table-row? [duplicate]

阅读更多关于 How to add box-shadow to a CSS div with display:table-row? [duplicate]

问题 This question already has answers here : Box Shadow on table row not appearing on certain browsers (8 answers) Closed 3 years ago . How do you add box-shadow to a CSS table row? Adding box-shadow: 2px 2px 2px #888888 to the element table-row in the code below does nothing and only works on the table element or the table-cell element: .table { display: table; background-color: #ffffff; } .row { display: table-row; box-shadow: 2px 2px 2px #888888; } .cell { display: table-cell; width: 100px; }