css-tables

display:table div with percentage width 1px bug

由 南笙酒味 提交于 2019-12-03 12:17:12
The outer div have percentage width, and inner div 's have display: tabel; width: 100% . The inner div 's show 1px less than outer div for some page widths while resizing. This adds an 1px line to the right. https://jsfiddle.net/afelixj/utcswLp1/1/ Is there any fix for the bug? This seems to be a specific webkit bug : https://bugs.webkit.org/show_bug.cgi?id=140371 The width of a display:table-* element is not always properly calculated when contained in a parent whose width is not defined with an absolute unit. You can see this issue in action here: Look at the right side of red elements You

Table with only vertical lines visible

由 帅比萌擦擦* 提交于 2019-12-03 11:01:43
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. 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; } <table> <tr> <td>a</td> <td>b</td> </tr> <tr> <td>c</td> <td>d</td> </tr> </table> Expounding upon Simon's

Table Column Formatting

由 拥有回忆 提交于 2019-12-03 08:45:58
问题 I'm trying to format a column in a <table/> using a <col/> element. I can set background-color , width , etc., but can't set the font-weight . Why doesn't it work? <table> <col style="font-weight:bold; background-color:#CCC;"> <col> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> 回答1: As far as I know, you can only format the following using CSS on the <col> element: background-color border width visibility This page has more info. Herb is right - it's better to

css display:table not displaying the border

由 谁说胖子不能爱 提交于 2019-12-03 05:23:57
问题 <html> <style type="text/css"> .table { display: table;} .tablerow { display: table-row; border:1px solid black;} .tablecell { display: table-cell; } </style> <div class="table"> <div class="tablerow"> <div class="tablecell">Hello</div> <div class="tablecell">world</div> </div> <div class="tablerow"> <div class="tablecell">foo</div> <div class="tablecell">bar</div> </div> </div> </html> According to my understanding,a black border should be drawn on each of the rows which i've specified via

How to make a table cell shrink width to fit only its contents?

由 天涯浪子 提交于 2019-12-03 04:59:06
I want the table to have 100% width, but only one column from it should have a free width, like: | A | B | C | so the width of A and B columns should match the width of their contents, but the width of C should go on until the table ends. Ok I could specify the width of of A and B in pixels, but the problem is that the width of the contents of these columns is not fixed, so if I set a fixed width it wouldn't match the contents perfectly :( PS: I'm not using actual table items, but a DL list wrapped in a div. The div has display:table, dl has display:table-row, and dt/dd display:table-cell ...

Table with Rowspan Hover and Zebra effect

由 ＊爱你＆永不变心＊ 提交于 2019-12-03 03:48:31
I am trying to create a table that has a rowspan, zebra effect and highlights the row on hover. I kind of got it working but not quite. It should be like this: http://codepen.io/chriscoyier/pen/wLGDz plus a zebra effect on the rows. Unfortunately a zebra effect using jQuery or CSS does not work for me as the lines won't change on hover if I do that. Any suggestions? Something like this? http://codepen.io/anon/pen/gcBlH Basically, doing: $("tr :even").css('background', '#ccc') and .hover { background: red !important; } This is a job for tbody . Multiple tbody elements are allowed in a table at

Create diagonal border of a cell

由 可紊 提交于 2019-12-03 03:36:18
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. 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(26.5deg); -moz-transform: rotate(26.5deg); -ms-transform: rotate(26.5deg); -o-transform: rotate(26.5deg);

css display:table not displaying the border

由 邮差的信 提交于 2019-12-02 18:40:52
<html> <style type="text/css"> .table { display: table;} .tablerow { display: table-row; border:1px solid black;} .tablecell { display: table-cell; } </style> <div class="table"> <div class="tablerow"> <div class="tablecell">Hello</div> <div class="tablecell">world</div> </div> <div class="tablerow"> <div class="tablecell">foo</div> <div class="tablecell">bar</div> </div> </div> </html> According to my understanding,a black border should be drawn on each of the rows which i've specified via tablerow class.But the border doesnt come up. And i wanted to change the height of a row.If i specify it

Content of element not 100% in IE10 inside of equal height columns

由 六眼飞鱼酱① 提交于 2019-12-02 13:50:01
问题 For an application I am working on I need equal height columns. I chose to use CSS to style my column items as table's. In this way the height of each columns is indeed the maximum among column heights. See an example here: http://jsfiddle.net/roelvd/GXe9m/ Now the height of each column is indeed 100% in each browser. The element (.container in my case) directly in each column should however also be 100% . This works fine in both Firefox and Chrome; but does not in IE10 (and most likely older

In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap

由 梦想与她 提交于 2019-12-02 10:38:02
问题 I have tried a number of CSS style settings, but can't seem to get it working, I either get the text to wrap or increase the size of the column. I have tried setting table-layout to fixed table { table-layout:fixed; } Have tried various different combinations for the column. Name { width: 100px; overflow:hidden; white-space:nowrap; } 回答1: Set a width on the entire table as well. The width can be set as a percentage, in pixels, or in other units. You might think that it suffices to set the
订阅 css-tables