css-tables

问题 Form (with firebug highlight hover the td): Label column CSS : width: auto; padding: 0; margin: 0; The problem : Why my left columns have that invisible "padding-right"? It's not possible to shrink columns to fit their content? --EDIT-- The problem was the table itself. I defined table with "width: 100%". Removed that and the problem is gone. 回答1: The problem was the table width. I had used width: 100% for the table. The table columns are adjusted automatically after removing the width tag.

问题 Form (with firebug highlight hover the td): Label column CSS : width: auto; padding: 0; margin: 0; The problem : Why my left columns have that invisible "padding-right"? It's not possible to shrink columns to fit their content? --EDIT-- The problem was the table itself. I defined table with "width: 100%". Removed that and the problem is gone. 回答1: The problem was the table width. I had used width: 100% for the table. The table columns are adjusted automatically after removing the width tag.

问题 I have a bunch of items (text, image, mixed content, etc) that I want to display. The user can define what row and what column that item appears in. For example, in row 1, there could be two items/columns, both images. In row two, there could be three items / columns, one with an image, two others as pure text. Oh, and the user may specify the width of any particular column/image/item. I have a solution that uses multiple tables that works. In essence, each row is a new table. This works for

问题 I need to use a grid layout but also need a horizontal line separating each row. The only thing I've been able to find is applying a border to each cell, but this only works if there are enough cells to fill each row. .wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } .box { border-bottom: 2px solid #ffa94d; padding: 1em; } <div class="wrapper"> <div class="box">One</div> <div class="box">Two</div> <div class="box">Three</div> <div class=

问题 When you try to absolutely position element to tbody , tr and even td you find out it does not work in most browsers. It works as expected in Firefox. Not in IE, Edge and Chrome. position: relative on tbody , tr and even td is ignored. And then first parent with position: relative is used as "anchor" for absolute placing. BTW: position: relative do works when you set tbody to display: block . But then you can be in trouble with widths of table rows. Generally, the child elements no more

问题 I have a table as this one: <table id="someID"> <tr><td>example text</td></tr> <tr><td>example text</td><td>example text</td></tr> <tr><td>example text</td></tr> <tr><td>example text</td><td>example text</td></tr> </table> And I want to hide the second and the third row in the table using only CSS. This table is predefined so I cannot use id or class tags to specify which row to style, I'm looking for some solution that targets the specific rows. If this can be done with CSS can someone tell

问题 I'm trying to come out with a table-like layout, with medicine names appearing on the left and the data occupy the rest of the table. Simply put: +-------------+------------+ medicine 1 | some data | some data | +-------------+------------+ medicine 2 | some data | some data | +-------------+------------+ Since I want to keep the data grid dynamic, I use two <div> 's with the style display:table-cell as two containers, the left one for all the medicine names, and the right one for the data

问题 In working on a layout, I decided to try combining a float-based layout for the major columns with a table-based layout for the sub-elements. Thus, my html/css markup was along these lines: HTML: <div class="column"> <div class="sub-element"></div> <div class="sub-element"></div> </div> <div class="column"> <div class="sub-element"></div> <div class="sub-element"></div> </div> ... CSS: .column { float: left; display: table; width: 15%; margin: 2%; /* ... */ } .sub-element { display: table

问题 In WebKit, Firefox and Opera, you can set the various table elements to display: block to stop them displaying like tables: http://jsfiddle.net/bHzsC/ This can be useful on smaller screens (e.g. iPhones) that don’t have room to display tables laid out traditionally. IE 9, however, still lays out the table cells next to each other horizontally — it doesn’t seem to honour display: block on the table elements. Is there any other code that will stop IE 9 (or earlier) from laying out tables as

问题 In WebKit, Firefox and Opera, you can set the various table elements to display: block to stop them displaying like tables: http://jsfiddle.net/bHzsC/ This can be useful on smaller screens (e.g. iPhones) that don’t have room to display tables laid out traditionally. IE 9, however, still lays out the table cells next to each other horizontally — it doesn’t seem to honour display: block on the table elements. Is there any other code that will stop IE 9 (or earlier) from laying out tables as