Why does the max-width get ignored in the following table, once I add display: table-row-group to header and body?
.table {
display: table;
}
.row {
display: table-row;
}
.cell {
display: table-cell;
padding: 5px;
border: 1px solid black;
}
.header,
.body {
display: table-row-group;
}
<div class="table">
<div class="header">
<div class="row">
<div class="cell" style="max-width: 4em;">
content content content content content
</div>
<div class="cell">
content
</div>
</div>
<div class="row">
<div class="cell">
content content content content content
</div>
<div class="cell">
content
</div>
</div>
</div>
<div class="body">
<div class="row">
<div class="cell">
content
</div>
<div class="cell">
content
</div>
</div>
</div>
</div>
I want to control the min/max-size of cells into body, setting min-/max-width on the head cells (that doesn't necessarily need two rows as in the snippet).
What is happening here? What prevents the max-width to work?
“the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.” See definition of max-width in the CSS 2.1 spec.
Related
Forget how to code a div style table.
I haven't coded html in years and am pretty rusty. I'm trying to create a responsive div style table with the first div spans the entire column with 2 more divs next to it. A div with 2 cells on top and a div that spans the 2 cells on bottom.
I'm trying to create something that looks like this image.
<div class="table">
<div class="row">
<div class="cell">cell 1</div>
</div>
<div class="row">
<div class="cell">cell 1</div>
<div class="cell">cell 2</div>
</div>
<div class="row">
<div class="cell colspan">
<div><div>
cell 3
</div></div>
</div>
<div class="cell"></div>
</div>
Use flexbox. By assigning display: flex; to the .table, .row, and .column elements, child elements of each all become flexible and can easily be controlled to take up certain percentages of space within the table, and grow to fill all the available space like a table would.
The flex property takes a little getting used to. Here I used it to tell flex items to grow (the first value, flex-grow), and starting widths (the third value, flex-basis). This resource makes it pretty easy to understand: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* { box-sizing: border-box; }
.table,
.row,
.column {
display: flex;
}
.column {
flex: 1 0 50%;
flex-direction: column;
}
.first-column {
flex-basis: 33%;
}
.cell {
flex: 1 0 100%;
padding: 20px;
border: 1px solid dodgerblue;
}
.first-row .cell {
border-left: none;
}
.second-row .cell {
border-top: none;
border-left: none;
}
<div class="table">
<div class="column first-column">
<!-- just the one cell in this column -->
<div class="cell">cell 1</div>
</div>
<div class="column">
<!-- need 2 rows here -->
<div class="row first-row">
<!-- first row will have 2 columns -->
<div class="column">
<div class="cell">cell 2</div>
</div>
<div class="column">
<div class="cell">cell 3</div>
</div>
</div>
<div class="row second-row">
<div class="cell">cell 4</div>
</div>
</div>
</div>
I created a Vuetify app managing some card items. Before adding the actions / buttons I check the User's permissions. If some permissions are missing these buttons will not be rendered. I created an example here
https://codepen.io/anon/pen/RmMRQb?editors=1010
As you can see the second div collapses because no children is rendered. This problem is not related to Vuetify, so I will reproduce it with default HTML / CSS example.
.container {
background: red;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I don't want the div to collapse. I already found a solution here
JQuery: Prevent div from collapsing when element hides()
but would like to ask if there is a way to achieve it without using some hardcoded heights or selecting the element's height. I don't want to modify Vuetify's native elements, so maybe there is a trick when the action bar is empty (no children got rendered) and the bar would not collapse.
I have added a secondary class for the default/native container. I think this is the best/easiest approach.
.improved-container {
background: red;
min-height: 40px;
}
.box {
display: inline-block;
height: 32px;
width: 32px;
margin: 5px;
background: blue;
}
.notRendered {
display: none;
}
<div id="app">
<h1>Div with visible elements</h1>
<div class="container improved-container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
<h1>Div with hidden elements</h1>
<div class="container improved-container">
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
<div class="box notRendered">
</div>
</div>
</div>
I have a very weird problem with my CSS it's like table-cell ignores width. I have 3 divs with
display: inline-table; vertical-align: middle;
second div have 5 divs inside with
display: table-cell; vertical-align: middle; width: 10%;
there's only 5 divs but they take 100% of their parent. When I change one of those five elements width then the others also change. Every time they fill 100% of their parent. Adding
table-layout: fixed;
doesn't work for me. I would like use flex but it must work on IE9 :/ Vertical align works perfectly.
Does anyone have an idea how to fix this?
Do you want like this?
HTML Codes:
<!-- Table Inline 1 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
<!-- Table Inline 2 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
<!-- Table Inline 3 -->
<div class="inline-table">
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
<div class="table-cell">
One
</div>
</div>
CSS Codes:
.inline-table{
display: inline-table;
border: 1px solid red;
padding: .2em;
}
.table-cell{
display: table-cell; vertical-align: middle;
border: 1px dashed green;
padding: .2em;
width: 10%;
}
I'm pretty new to HTML and CSS so perhaps this is a crazy easy question to answer.
The question is:
How to do this using only divs and css?
I don't want to use <table> <tr> <th> <td>....
Here's a basic setup of what you're asking using the flexbox property.
The CSS3 Flexible Box, or flexbox, is a layout mode providing for the
arrangement of elements on a page such that the elements behave
predictably when the page layout must accommodate different screen
sizes and different display devices. For many applications, the
flexible box model provides an improvement over the block model in
that it does not use floats, nor do the flex container's margins
collapse with the margins of its contents.
Read more about it at MDN and experiment with it so you feel comfortable using it. The setup might not be pixel perfect, but it gives you a good start for the desired layout. Trial and error, that's the best way to learn.
div {
box-sizing: border-box;
border: 1px solid black;
min-height: 20px;
}
.container {
display: flex;
flex-flow: row-wrap;
width: 100%;
}
.column {
flex: 1 1 100%;
}
.middle {
flex-basis: 200%;
}
.middle-top,
.right-top,
.right-bottom {
display: flex;
flex-flow: row wrap;
width: 100%;
}
.language,
.search,
.login,
.signup,
.some-text,
.avatar {
flex: 1 1 50%;
}
<div class="container">
<div class="column left">
<div class="social">
Social icons
</div>
<div class="logo">
Logo
</div>
</div>
<div class="column middle">
<div class="middle-top">
<div class="language">
Language
</div>
<div class="search">
Search
</div>
</div>
<div class="slogan">
Slogan
</div>
<div class="menu">
Menu
</div>
</div>
<div class="column right">
<div class="right-top">
<div class="login">
Login
</div>
<div class="signup">
Signup
</div>
</div>
<div class="right-middle">
Welcome guest
</div>
<div class="right-bottom">
<div class="some-text">
<div class="something">
Some text
</div>
<div class="something">
Some text
</div>
</div>
<div class="avatar">
Avatar
</div>
</div>
</div>
</div>
Once between the div tags, an HTML tag (eg headings, breaks), the contents are no longer align the same. Example: Html.DisplayFor (...) should end always justified. How can this be fixed?
<div class="table">
<div class="row">
<div class="cell">
<h3>Heading 1</h3>
<hr />
<div class="row">
<div class="cell">Label 1</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<div class="row">
<div class="cell">Label 2 with much more Text</div>
<div class="cell">Html.DisplayFor(...)</div>
</div>
<br />
<h3>Heading 2</h3>
<hr />
<div class="row">
<div class="cell">Label 3 with Text</div>
<div class="cell">Html.TextBoxFor(...)</div>
</div>
</div>
<div class="cell">
...
</div>
</div>
</div>
CSS:
div .table {
display: table;
width: 100%;
}
div .cell {
display: table-cell;
padding: 0.3em;
}
div .row {
display: table-row;
}
It should actually look more like this (red line):
Its because you break the flow of the layout by not adhering to only using a table->row/cell structure but by injecting div and hr elements in the middle of it.
You could simply add a width to the first column:
.row .cell .row .cell:first-child{
width:200px;
}
Demo Fiddle