css-tables

How to make all the rows of a table the same height as the biggest one

由 不羁岁月 提交于 2019-12-11 03:22:29
问题 I am trying to make all the rows of a table the same height as the one that has the longest text in it, expanding accordingly. But all I achieved is give them a fixed height after reading this: How can I force all rows in a table to have the same height This means that I need to predict how much text I should put in it which is obviously not predictable. Is it possible with CSS or do I need using Javascript? 回答1: It's not possible with pure CSS. It's possible to do it with javascript. For

HTML Table overflow-y scrolling with fixed y axis headings

由 半腔热情 提交于 2019-12-11 02:48:52
问题 I have a table with headers for both the x and y axes, and want the table to scroll when it overflows on the y axis while retaining the header. Using display: block; overflow-y: auto; in the <table> element gives me some scrolling, but I lose the y axis labels. Here's a simple pen work-in-progress: https://codepen.io/Malgalin/pen/wNZRPz?editors=0100 I have also tried versions of making the th[scope='row'] elements have a fixed position, which sort of works, but it creates messy over-lapping

“Faking” table rows with divs and spans?

由 Deadly 提交于 2019-12-11 02:36:42
问题 I'd like to create some "table rows" using <div> and <span> . (Why not use actual table rows? Because I want to set rounded corners on each table row using the awesome jquery corner plugin, and it doesn't seem to like table rows.) I'd like three-cell rows, with LH and RH cells of fixed width, and a central cell of fluid width, in which the text should wrap. [fixedwidth][wrapwrapwrapwrap ][fixedwidth] [fixedwidth][wrapwrapwrapwrapwrapwrapwr][fixedwidth] apwrapwrapwrapwrapwrapwr [fixedwidth]

How can I convert this table based layout to CSS?

由 萝らか妹 提交于 2019-12-11 02:26:24
问题 I have a table based layout which is 100% height/width with no scrollbars. The header (red) automatically expands to fit the content and I don't know how many pixels it will be. The fluid table below gives exactly what I what. <html> <body height=100%> <table height=100% width=100% padding=0> <tr height=1><td colspan=2 bgcolor=red>Fit<br/>to<br/>content<br/>height</td></tr> <tr><td bgcolor=blue width=66% valign=top>How can I do this with CSS?</td><td bgcolor=green valign=top> <div style=

Safari bug ? Translating table-row-group using GSAP make caption jump to bottom

由 泄露秘密 提交于 2019-12-11 00:56:55
问题 We are animating a calendar using GSAP. The calendar is draw using css table, row and caption... We wanted to animated some part of this table. But better than words here is a codepen to open on safari: https://codepen.io/anon/pen/rmrJRy var body = document.getElementById('body') TweenMax.to(body, 1, {x: 400}); .table { display: table; width: 500px; } .header-group { display: table-header-group; } .body { display: table-row-group; } .caption { display: table-caption; } .cell { display: table

What is the proper arrangement for table-header-group?

由 此生再无相见时 提交于 2019-12-10 22:38:06
问题 I'm trying to build a footer that has two title columns and three content columns. I'd like to use display: table-cell for the content columns, and believe I need to use display: table-header-group for the title columns. While researching display: table-header-group , I could not find any documentation at all on how to use this CSS property. W3Cschools says the following. table-header-group: Let the element behave like a thead element. (source) That unfortunately doesn't tell me how I should

Is it better to use divs or tables to contain columns of links?

由 依然范特西╮ 提交于 2019-12-10 21:27:52
问题 I have a page with 3 columns of links at the bottom. Each column is put into a div and all three divs are wrapped into a big div that is centered on the page. Is this something that is better suited to a table or is a table the wrong element for the job? 回答1: You can also use <ul> & <li> for this. #horizontal { width: 100%; background: #eee; float: left; } #horizontal ul { list-style: none; margin: 0; padding: 0; width: 12em; float: left; } This will create horizontal columns using li

Are there any polyfills for display: table, table-row, table-cell etc

由 寵の児 提交于 2019-12-10 15:08:06
问题 I'm realizing that, for a lot of purposes, display: table and likewise table-row, table-cell and so forth have very useful positioning properties, and can be used instead of floats for a lot of purposes, such as for making floatless menus, and better aligned footers. However, the lack of support is a real deterrent. I'd like to know what options are there for polyfills to emulate display: table, table-cell, table-row etc? 回答1: The support for table-row , for instance, is actually pretty good.

Using margin with display table-cell [duplicate]

由 删除回忆录丶 提交于 2019-12-10 13:30:29
问题 This question already has answers here : Why is a div with “display: table-cell;” not affected by margin? (4 answers) Closed 5 years ago . I have try adding margin-left/margin-right in li but it doesn't give them a space in between. What should I add to make a space in between the list ? CSS: .btn-top { float: right; height: 40px; margin-right: 10px; margin-top: 10px; } .btn-top ul { height: 100%; padding: 0; } .btn-top ul li { list-style-type: none; display: table-cell; width: 100px; height:

Split a table in half

由 匆匆过客 提交于 2019-12-10 12:34:30
问题 Is there anyway to split a table in half using CSS and display the two parts side-by-side. For example, take this: | row1 | row1 | row1 | | row2 | row2 | row2 | | row3 | row3 | row3 | | row4 | row4 | row4 | | row5 | row5 | row5 | And make this: | row1 | row1 | row1 | | row4 | row4 | row4 | | row2 | row2 | row2 | | row5 | row5 | row5 | | row3 | row3 | row3 | I can change the HTML markup (like marking the "breaking" row with a custom class), but I have to be able decide if the table would be
订阅 css-tables