3 ms·
Sure there is, the grid-row and grid-column CSS properties https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US
by xkyf 5y ago
Sure there is, the grid-row and grid-column CSS properties
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_La...
- asddubs 5y agosure, but if I have an actual table with tabular data, it would be nice to be able to just hide a row and adjust colspan in css as well as necessary. it's much less of a problem than it used to be these days, since grid is very well supported now, but still kind of annoying to rebuild the entire table into a grid.
- onion2k 5y agoIf you have an actual table with tabular data then your should be using an HTML table. That's what it's for.
- asddubs 5y agoyes and if i want to make it responsive i can't change the colspan/rowspan via css. that was my point.
- xkyf 5y agoYou can! CSS Grid works just fine with <table> and its related elements. In fact Grid is overkill here, you can span multiple rows or columns using flexbox alone. You don't need to "rebuild" anything, use the same markup. You couldn't control colspan/rowspan with CSS before, only HTML, which isn't responsive. (Ignoring the `column-span` property which isn't very flexible.)
- asddubs 5y agoI'm afraid we are still talking past one another. When I said "rebuild", what i meant was that I have to rebuild the table layout in css using grid to make it responsive. If they added a css equivalent of colspan/rowspan for table-layouts, it would be much easier to do simple tweaks to tables in css. it's not the end of the world that it's not possible, but it's already part of the layout engine so it wouldn't be hard to add. (and the column-span property is unrelated to tables)
- xkyf 5y agoWe aren't, you need to be more specific. > I have to rebuild the table layout The "layout" meaning the visual appearance, or the markup? There IS a "css equivalent of colspan/rowspan for table-layouts," put another way--a way to make a column or row (<td> or <tr>) appear to span multiple columns or rows. It can be achieved with flexbox or with CSS grid. You don't need to change anything about the markup (HTML) to make this work. > to make it responsive "Responsive" as in "responds to the size of the viewport?" The colspan and rowspan HTML attributes do not do that. They have the same value regardless of the size of the viewport. CSS (with media queries) can respond. > the column-span property is unrelated to tables Incorrect, it is certainly related, and works there just fine (along with other in-flow block-level elements).
- asddubs 5y agolayout meaning i have to change the display type from table/table-row/table-cell to something else to recreate the way the table is structured. if there was a colspan/rowspan equivalent, i would not have to do this, and would the process would be much simpler. Yes, I know there are workarounds using flexbox, grid, etc. but as I've said before, it would be nice if i didn't have to reconstruct the whole thing in css just becuase there is no rowspan/colspan for table-layouts in css. there is no equivalent of colspan/rowspan in css, as in not some convoluted workaround but doing exactly the same thing only via css instead of a html attribute. I don't really think I've been that unclear about this being what I want to be added. I was not talking about changing the html, but turning a table into a grid is more than just doing table {display:grid;}, you have to rebuild the whole structure, i.e. layout of the table using css. if i could use rowspan (as in actual literal rowspan not some other workaround), i would not have to do this. yes responsive as in hide one or multiple rows of table cells on some screen resolutions to make things fit better. as I've previously said. >Incorrect, it is certainly related, and works there just fine (along with other in-flow block-level elements). it does not manipulate the amount of table rows a table-cell-display element takes up.
- xkyf 5y ago> doing exactly the same thing only via css instead of a html attribute Yes! What's wrong with this approach? We have a lot of old HTML attributes that were used for styling that have been replaced by CSS. > Yes, I know there are workarounds using flexbox, grid, etc It's not a "workaround!" You're controlling the appearance using the styling language. What's wrong with this example? https://jsbin.com/wexisiyamo https://jsbin.com/wexisiyamo > "responsive" as in hide rows of table cells on some resolutions to make things fit better HTML attributes (like colspan) don't do this! CSS does. > it does not manipulate the amount of table rows a table-cell-display element takes up I know, I mentioned it before :) it's related though. With HTML attributes the layout is tied to your markup. Like you said it's more than table {display:grid;} but is adding .colspan-2 a lot more cruft than adding [colspan=2]?