css-tables

问题 I'm trying to design some HTML/CSS that can put a border around specific rows in a table. Yes, I know I'm not really supposed to use tables for layout but I don't know enough CSS to completely replace it yet. Anyways, I have a table with multiple rows and columns, some merged with rowspan and colspan, and I'd like to put a simple border around parts of the table. Currently, I'm using 4 separate CSS classes (top, bottom, left, right) that I attach to the <td> cells that are along the top,

问题 http://jsfiddle.net/fQv97/ HTML <div class="table-cell"> My text, should be align middle </div> CSS .table-cell { height: 200px; width: 200px; vertical-align: middle; background: #eee; display: table-cell; position: absolute; } Problem The text should be placed in the middle of my "table cell". Everything works as expected until I add "position: absolute". Now it can't place my content in the middle any more? Why not? It still knows my height and width because I set it in my CSS. Any clever

问题 I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties. Where do I put them in my code in order to force page breaking if needed? 回答1: You can use the following: <style type="text/css"> table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } </style> Refer the W3C's CSS Print Profile specification for details. And also refer the Salesforce developer forums. 回答2: Wherever

问题 I have a dynamic table in my web page that sometimes contains lots of rows. I know there are page-break-before and page-break-after CSS properties. Where do I put them in my code in order to force page breaking if needed? 回答1: You can use the following: <style type="text/css"> table { page-break-inside:auto } tr { page-break-inside:avoid; page-break-after:auto } </style> Refer the W3C's CSS Print Profile specification for details. And also refer the Salesforce developer forums. 回答2: Wherever

问题 I have some problems with my DIV table.. maybe there is a better way to do this. I want to have all columns to be the same height as the highest column. Is there a way to do it? or is there another way to make this work ? I have to made a jsfiddle example here with my code: http://jsfiddle.net/rb500o4L/ (right column is higher than left, middle and the logo column.) My CSS code: div.round-border { border: solid 1px; border-color: #002F67; border-radius: 10px; } #container { display: table;

问题 Part-way down my page I have a table with two columns and multiple rows, each containing varying amounts of dynamically generated text. I would like to float a div (of fixed size) so that it spans as many rows of the second column as may be necessary from the top-right corner, with lines of text wrapping around it as required. So if, for example, the bottom of the div is half-way down the third row, the text in that row should wrap around the left and bottom edges of the div. I hope this

问题 My table has static width values but sometimes table cells of a certain column can contain text which is too long and which messes up the table's width. I'm looking for a way to dynamically shorten text (kind of like a table grid functionality but then without grids) because it can be of a variable length, and when one hovers over the table cell the entire text is shown without stretching the table. Currently, I have this hard coded in my script in the following way: string.substring(0, 65) +

问题 I have a table, always three columns of relatively the same info. I'm trying to get it to look like this: So, each "cell" (in the x area) is currently two td 's, one for the text and other for the image. I'm trying to figure out how to evenly space them all across the page and put a small margin in between each one. Currently, it looks like this HTML: <div> <table> <colgroup> <col style="width:33%"> <col style="width:33%"> <col style="width:33%"> </colgroup> <tbody> <tr> <td class="cellData">

问题 I've got a table and I'd like to make a portion of it fixed and a portion of it scrollable. I'm looking to end up with something like this, except in a single table. http://jsbin.com/owuva4 Here's a JSFiddle that does the scrolling, but I can't figure out how to wedge in the correct css classes to make part of the table fixed and part scrollable. http://jsfiddle.net/bnd5k/J9QV7/6/ Here's the css so far: #big_table { width:200px; overflow-x: scroll; } .fixed_cols { } .scrollable_area { Ideally

问题 I have the following table created in d3 (see image below) which has two columns. However, I am unable to remove the white space on the right hand side of the table. Here is the html and CSS for the table: html <!DOCTYPE html> <html> <head> <title></title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="grid-container"> <div class="map"> <svg></svg> </div> <div class="box-plot"> <svg></svg> </div> <div class="table"></div> <div class="line-chart"> <svg><