css-tables

问题 I have UL element inside it there is 3 li tags I want to put them next to each other separated by lines: <ul> <li>value 1</li> <li>value 2</li> <li>value 3</li> </ul> I want the output to look like this: value 1 | value 2 | value 3 BTW in the li tags their is a picture and a text, I want them (image & text) next to each other and in the center of the box using CSS. 回答1: ul li { // EITHER float: left; //Will make all li's be on a single line. // OR display: inline-block; //Always followed by:

问题 When printing an HTML table, you can use CSS to force the table's header row to display again after the page break. This style: @media print { thead { display: table-header-group; } } Results in: Caption ------------- Col1 | Col2 ------------- Data1 | Data2 Data3 | Data4 --Page Break-- Col1 | Col2 ------------- Data5 | Data6 Is there a way to also repeat the table caption after the page break? I would think you could do something like caption { display: table-caption-group; } , but this doesn

问题 I want to add a certain background color from a certain column onwards. Instead of having to use a css class for each column, i would rather prefer to do it otherwise if possible. I will have a huge table with hundreds of rows and around 25 columns and I prefer to avoid unnecessary code. Currently, I am using td:nth-of-type property to do it: .demo tr.selectedRow td:nth-of-type(9), .demo tr.selectedRow td:nth-of-type(10), .demo tr.selectedRow td:nth-of-type(11), .demo tr.selectedRow td:nth-of

问题 I'm hardly an expert in css, so this is a bit frustrating. I have a grid that was filled with a repeater. I want each row to have a 1px border along the bottom to visually separate the rows. I also want a dark gray border on each side of the table. With the following CSS for this table: #repeaterTable { border-left: 1px solid #A3A3A3; border-right: 1px solid #A3A3A3; border-collapse: collapse; } repeaterTable.td { border-bottom: 1px solid white; } I am getting this result in FF (SS of right

问题 I am trying to make a table with Vertical Text just on the header table. Here is my CSS code: table th.user { .rotate(90deg); position: relative; padding-top: 190px; top: -10px; right: 0px; width: 200px; } Here is the demo http://codepen.io/anon/pen/GnveJ As you can see it works partially. I would like to have the columns (the cells of the column where there are the name) which width fits exactly the contents (about 50 px); the same as the pic I attached to this question. Any idea what is the

问题 I want to set a minimum height for tbody in CSS, even if no <tr><td></td></tr> in tbody, here is my code: tbody{ height: 500px; min-height:500px; } but it doesn't work. so what should I do to achieve this? 回答1: Why you want to do this? Min-height and height applies to block level elements and table isn't a block level element. Wrap your table inside a div (say div.table-wrap) and apply minimum height to that div. If you don't want table layout isn't important to you, then just add display

问题 I have applied CSS border-bottom:1px dashed #494949; on several consecutive cells of a single row of an HTML table, but the border is not uniform. The dashes at the end of each cell appear little longer. Dotted border is also not uniform. I am also using border-collapse:collapse; Here is the screenshot: Is there any way I can get uniform dashed border? 回答1: Browsers have oddities in rendering dashed borders. You can fight against them by removing cell spacing and cell padding and setting the

问题 Given markup like this: <div class="a">A</div> <div class="b">B</div> <div class="a">A</div> <div class="b">B</div> <div class="a">A</div> <div class="b">B</div> Is it possible to style this document to look like this: |-------|---------| | | | | A | B | | | | |-------|---------| | | | | A | B | | | | |-------|---------| | | | | A | B | | | | |-------|---------| (and if the content in A or B is longer, its neighbor will grow to match its height)… without any additional markup? I understand

问题 If I have <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> and table { width: 100%; height: 100%; } Each cell takes up an equal quarter of the table, and the table stretches to fit the window. How can I prevent these table cells from resizing themselves to fit the content within the cells (while still fitting the table's container)? 回答1: You could try table-layout:fixed; - this sets the layout to a certain fixed size (specified in CSS) and ignores the content of

问题 To start with, I have examples and code here (a site I keep to play with stuff). This is the actual link just in case: http://www.williamrosmus.com/examples/calendar1_wf.html This is an issue I am having specifically with Firefox (I'm using v3.6), and am wondering what is going on. Requonc displays reasonably and IE8 perfectly. For a learning exercise I manually created a calendar in xhtml using CSS tables rather than traditional html tags. I set the height and width for the cells to be 100px