css-tables

Why should I use display:table instead of table

自古美人都是妖i 提交于 2019-12-17 18:36:39
问题 What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr). Doesn't this mean that the divs will behave exactly like tr and td elements? I know I probably shouldn’t use tables or table behavior for layout at all but I'm just curious if there's a difference and a benefit? 回答1: What's the benefits of structuring my site with divs and apply the display:table property ( display:tr, display:tr). None whatsoever in my opinion, except that you

Controlling Spacing Between Table Cells

醉酒当歌 提交于 2019-12-17 16:27:15
问题 I'm trying to create a table where each cell has a background color with white space between them. But I seem to be having trouble doing this. I tried setting td margins but it seems to have no effect. table.myclass td { background-color: lime; margin: 12px 12px 12px 12px; }​ If I do the same thing with padding, it works, but then I don't have the spacing between cells. Could someone help me with this? jsFiddle: http://jsfiddle.net/BfBSM/ 回答1: Use the border-spacing property on the table

How are `display: table-cell` widths calculated?

℡╲_俬逩灬. 提交于 2019-12-17 07:39:10
问题 This question comes out of this existing question which I provided a solution to, but couldn't provide an explanation as to why. I've stripped their fiddle right down to the bare bones and have the following HTML / CSS: <div class="table"> <span class="cell-1">cell 1</span> <span class="cell-2">cell 2</span> </div> .table { display: table; } .cell-1, .cell-2 { display: table-cell; padding: 6px 12px; border: 1px solid #ccc; } .cell-1 { padding: 6px 12px; background-color: #eee; border-right: 0

Box Shadow on table row not appearing on certain browsers

落花浮王杯 提交于 2019-12-17 06:11:53
问题 CSS box-shadow on table rows - tr - doesn't seem to be working consistently across browsers. On some browsers the shadow is displayed; on others, there is no shadow. I'm using the following CSS: tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px black; -moz-box-shadow: 0px 2px 2px black; -webkit-box-shadow: 0px 2px 2px black; } td, th { padding: 5px; text-align: left; } Here is a jsFiddle of the below snippet: tr { background-color: rgb(165, 182, 229); box-shadow: 0px 2px 2px

How can I lock the first row and first column of a table when scrolling, possibly using JavaScript and CSS?

雨燕双飞 提交于 2019-12-17 04:53:28
问题 How can I create a table that has its first row and first column both locked, as in Excel, when you activate 'freeze panes'? I need the table to both scroll horizontally and vertically (a lot of solutions for this exist, but only allow vertical scrolling). So, when you scroll down in the table, the first row will stay put, since it will have the column headings. This may end up being in a thead , or it may not, whatever makes the solution easier. When you scroll right, the first column stays

IE display: table-cell child ignores height: 100%

北城余情 提交于 2019-12-17 03:21:31
问题 I need to dynamically build a table to hold some data. I've followed the usual approach of using divs with display: table , display: table-row and display: table-cell : .tab { display: table; height:100%; width: 200px; } .row { height: 100%; display: table-row; } .elem { border: 1px solid black; vertical-align: top; display: table-cell; height:100%; background: blue; } .content { height: 100%; background: greenyellow; } <div class="tab"> <div class="row"> <div class="elem"> <div class=

Squeeze a table column to it's minimum possible width

半腔热情 提交于 2019-12-14 03:48:39
问题 Throughout my website, I have many <table> s in which there is a specific column we want to have squeezed to it's minimum possible space (without having it's text wrapped). Other sibling cells share the rest of the space automatically. I'm using the following trick and it works in all browsers except IE7-. (At this time I actually only care about IE7) table {width:100%;} table td.min-col {white-space:nowrap; width:1px; } jsFiddle link: http://jsfiddle.net/vm8gc/23/ If you try this in IE7 you

How can I truncate text in a div or cell as the browser resizes

牧云@^-^@ 提交于 2019-12-14 03:09:20
问题 I have a row consisting of icon/text/timestamp in the header section of my HTML page. I want to have the icon and the timestamp of this row remain at a fixed width, and when the browser resizes, I want to reduce the size of the text div (table-cell) by having an ellipsis appear. While I can get the ellipsis to appear with a fixed width, I want the width of the text div (table-cell) to be 100% until the browser gets smaller, then I want this text div to get smaller and for the ellipsis to

DIV TABLE (4x4)

丶灬走出姿态 提交于 2019-12-13 22:12:31
问题 I am looking for a div table, with 4 columns and 4 rows. I would like the width to be 100%, I would like to insert images and text into each div. Can anyone help? 回答1: If you need to show tabular data, just use a table. If you want it to be responsive you might use this as a layout: example .row{ clear: both; width: 100%; margin: 0px; padding: 0px; } .cell{ float: left; min-height: 100px; width: 24%; border: 1px solid black; text-align: center; min-width: 100px; } Note: I set the minimum

Override table style on nested inner table

白昼怎懂夜的黑 提交于 2019-12-13 17:22:29
问题 Please view my js fiddle: http://jsfiddle.net/WillingLearner/gzYPU/7/ As you can clearly see when you run the fiddle, the inner table with the border is not displaying its own styles. Its inheriting the style from the parent. Please help me display the inner table with its own styles only, while still remaining nested in the parent table row. 回答1: There are various ways to fix your problem. You have two styles on tr : #MainTable_Forums tr:nth-child(even) #MainTable_Forums tr:nth-child(odd)