css-tables | 易学教程

display:table versus using tables

阅读更多关于 display:table versus using tables

问题 I was wondering if it's a good idea to use CSS display property to emulate tables for a veeeery simple forum system. I know this wasn't good thing to do like 2 years ago when IE and maybe others did not support display:table / table-cell etc. But I think now all browsers support it, right? 回答1: If the information being displayed on the forum is tabular, then don't be afraid to use a table if it makes sense semantically. For general page layout, personally I wouldn't use it. I'd stick to the

Sticky flexible footers and headers CSS working fine in WebKit, but not in Gecko

阅读更多关于 Sticky flexible footers and headers CSS working fine in WebKit, but not in Gecko

问题 I'm attempting to build a layout that allows a flexible height header and footer, with a section in the middle consuming the remaining space. Any overflow in the middle should give a scroll bar just for this middle section. The code I have that works fine for Safari and Chrome is: <!DOCTYPE html> <html> <head> <style> html, body { margin: 0; padding: 0; height: 100%; } .l-fit-height { display: table; height: 100%; } .l-fit-height > * { display: table-row; height: 1px; background-color: red; }

How to make hover state on row table with CSS grid layout

阅读更多关于 How to make hover state on row table with CSS grid layout

问题 This a table that created with CSS Grid Layout, but I have a problem with it, I can't make hover state on each row. I only want use CSS for this. Can anyone give me a solution for this? .table { display: grid; grid-template-columns: [col-start] auto [col-end]; grid-template-rows: [header-start] 50px [header-end row-start] auto [row-end]; grid-auto-rows: auto; grid-auto-columns: auto; grid-gap: 1px; } .table>* { background: gray; padding: 10px; } .heading { background: navy; color: #fff; grid

How (and why) to use display: table-cell (CSS)

阅读更多关于 How (and why) to use display: table-cell (CSS)

问题 I have a site with a very active background (I'm talking 6 or so different z-indexes here 2 with animations). I wanted a in the foreground that had content but wanted a "window" through to the background in it. Some problems I had: you can't "punch a hole" in a background, so... I built a containing div, lets call it "srminfo" Inside that I had a "top", "left", "window", "right" and "bottom" the top, left, right, bottom all had opaque white backgrounds while the srminfo and window divs had

Why is width: 100% not working on div {display: table-cell}?

阅读更多关于 Why is width: 100% not working on div {display: table-cell}?

问题 I'm trying to vertically and horizontally center some content overlaying an image slide (flexslider). There were some similar questions to this one, but I couldn't find a satisfactory solution that applied directly to my specific problem. Because of the limitations of FlexSlider, I cannot use position: absolute; on the img tag in my implementation. I almost have workaround below working. The only problem is I cannot get the width & height declarations to work on inner-wrapper div with the

Why width property doesn't work on my table?

阅读更多关于 Why width property doesn't work on my table?

问题 I have a code like this: main { position: relative; width: 80%; float: right; height: auto; } div.container { width: 95%; height: auto; margin: 0 auto; } main div.container>table { width: 10px; overflow: hidden; background-color: red; } <main> <div class="container"> <table> <thead> <tr> <th>Nama event</th> <th>Kategori event</th> <th>Keterangan event</th> <th>Waktu event</th> <th>Lokasi event</th> <th>Cover</th> </tr> </thead> <tbody> <tr> <td>something</td> <td>something</td> <td>something<

How can I make the first and second column of a table sticky

阅读更多关于 How can I make the first and second column of a table sticky

问题 i have a div with with property <div id="_body_container" style="height: 500px; overflow-x: auto; overflow-y: auto; "> </div>` inside this div i have the table which has class views-table , this table has 100% width which makes it's parent div: _body_container scrollable.I want to fix the first and the second column of this table sticky at their positions while the left and right scroll event happen for _body_container structure is like: 回答1: Assuming each section is a <td> element... CSS

How can I make the first and second column of a table sticky

阅读更多关于 How can I make the first and second column of a table sticky

Specifying a fixed column width in jQuery Datatables

阅读更多关于 Specifying a fixed column width in jQuery Datatables

问题 I'm trying to specify a fixed width for a few columns in a jQuery datatable. I've attempted to accomplish this via the column definitions specified in the datatables documentation, but the column and column header still get auto-sized. Here's the jsFiddle I've been working with: jsFiddle JavaScript: var table = $('#example2').DataTable({ "tabIndex": 8, "dom": '<"fcstTableWrapper"t>lp', "bFilter": false, "bAutoWidth": false, "data": [], "columnDefs": [ { "class": 'details-control', "orderable"

What is the best way to style alternating rows in a table?

阅读更多关于 What is the best way to style alternating rows in a table?

问题 Obviously, the actual style of the odd/even rows will be done via a CSS class, but what is the best way to "attach" the class to the rows? Is is better to put it in the markup, or is it better to do it via client-side javascript? Which is better and why? For simplicity's sake, let's assume that this is a large table, 100 rows, and that the color scheme is alternating odd/even rows. Additionally, some sort of javascript library that can easily do this is needed elsewhere in the page and so the