I'm trying to set rows within a table to be 20% of page height.
Currently index.html looks something like this:
div#machines {
display: flex;
height: 100%;
justify-content: center;
align-items: center;
padding-left: 10%;
padding-right: 10%;
width: 80%;
}
html,
body {
height: 100%;
min-height: 100%;
}
td {
width: 20%;
height: 100%;
}
tr {
width: 100%;
height: 20%;
}
table {
width: 100%;
height: 100%;
}
<body>
<div id="machines">
<table>
<tr>
<td id="stone">0</td>
<td id="copper">0</td>
<td id="iron">0</td>
<td id="coal">0</td>
</tr>
<!-- ... (trs continue but truncated for length of code) -->
</table>
</div>
</body>
So therefore (at least to my understanding) a table is taking up 100% of the machines div then I create a row in that table that is 100% of the width and 20% of the height (but incorrectly the row becomes 100% of the height of the table.) The td should then be 20% of the width of the row and 100% the height of the row.
How can I fix this so that a tr is only 20% of the page height? Thank you.
You can use Viewport units (the browser window size). 100vh is the height of the screen and 100vw is the width of the screen.
If the table higher you can use the min-height property and set it to 100vh.
If i understood the question, i think this css would do what you need:
td {width: 20vw;}
tr {height: 20vh;}
table {width: 100%; min-height: 100vh;}
Hope it helps.
Read more here: https://developer.mozilla.org/en-US/docs/Web/CSS/length
It's the conflict between the style of your tr and td. Try removing one each and see the difference. It's not possible to set different heights of the two since td is embedded in tr.Hope this helps.
Related
I've got 3 elements in a div with an overflow. First two are divs, third is a table. I need to place them in a single row.
My table's width is determined by cell width. Setting a table width would make this easy, but I can't do that because cell number varies. I want it to overflow a parent div and make it scrollable and not shrink based on parent width. This was achieved by setting a table's width to 100% and setting it table-layout to fixed. But because it has width set to 100%, it puts it in a second row.
I can't set position absolute on table because it's contained within a moveable div. I need it to be relative to parent div. I've found it's doable by setting a negative margin-top on table, but I would prefer to not have this hardcoded in case height of my first two elements changes.
Here is a JSFiddle of my situation: https://jsfiddle.net/9mvjftag/
HTML:
<div class="container">
<div class="first-row">
test
</div>
<div class="second-row">
test
</div>
<table>
<tr>
<td>test</td>
<td>test2</td>
</tr>
<tr>
<td>test</td>
<td>test2</td>
</tr>
</table>
</div>
CSS:
.container {
width:300px;
background-color:red;
overflow: auto;
}
.container > * {
float: left;
}
table {
table-layout: fixed;
width: 100%;
}
table td {
background-color: white;
width: 200px;
}
How do I achieve this? Changing table's css is fine as well if there's another way to achieve my current situation (it's width determined by cell width, overflowing the parent div)
Here is an article that may help you it involves using Flexbox.
so in your case, this may work
HTML
<ul class='row'>
<li class='item'></li>
<li class='item'></li>
</ul>
CSS
.row{
background-color: #fff;
min-width: 100%;
min-height: 200px;
display: flex;
justify-content: center;
align-items: center;
overflow-x: auto;
}
.row::-webkit-scrollbar {
display: none;
}
.item{
background-color: #e74c3c;
min-width: 200px;
margin: 5px;
}
all the class names or HTML selectors can be interchangeable and I just used %ul and %li and examples
I need to create something like the old html tables, but with css.
Look this structure:
<div id="dad">
<div id="child-one"></div>
<div id="child-two"></div>
</div>
"dad" should have "width: 100%"
"child-one" should have "width: 300px" (the static width row)
"child-two" should have all the next width. (the dinamic width row)
So, if "dad" have 1000px (but, remember this is 100%, not 1000px. Let's supouse that the user have a 1000px of resolution), so:
"child-one" should have 300px (for ever! and never change), and:
"child-two" should have 700px (but, changing dinamically if dad change the width).
How can I do that?
Currently, "child-two" get the width of its content. Example: If into child-two there is an IMG with width:50px, "child-two" will have only 50px... BUT I NEED 700px!!!
Here the best solution:
Dynamic width DIV next to a static width DIV
maybe this is what you are looking for
.dad{
border: 2px solid #000;
background-color: black;
width: 100%;
height: 200px;
display: table;
}
.child-one{
background-color: blue;
width: 300px;
height: 200px;
display: block;
}
.child-two{
background-color: red;
width: 100%;
height: 200px;
display: table-cell;
}
http://jsfiddle.net/j4ngerxb/
try this one:
#dad {
width: 1000px;
}
#child-one {
width: 30%;
}
#child-two {
width: 70%;
}
I want to make a 900px wide centered table with one row and two cells.
I want the right cell to always be 200px wide and the left cell should fill out the rest, but when I make the browser window smaller the right cell jumps down under the left cell.
(when both cells have percentages it works fine but the right cell/block needs to be 200px)?
My HTML:
<table class="sitecontent">
<tr>
<td class="boxed"> contents </td>
<td class="infobar"> contents </td>
</tr>
</table>
My CSS:
.sitecontent {
max-width:900px;
margin: 0 auto;
display: table;
height: 100%;
}
.boxed {
max-width:75%;
float: left;
}
.infobar {
float: left;
width: 200px;
border: 1px solid rgb(240,240,240);
overflow: auto;
max-height: 100%;
}
Shouldn't the max-width make the width of "boxed" less than 75% so that the content fits when the table width goes below 900px?
I've tried using divs instead of a table, but the result is the same?
If you want the other cell to fill out the rest of the space you can use a function called calc()
This allows you to determine sizes using basic addition and subtraction using percentages and fixed units.
calc() is widely supported see http://caniuse.com/#feat=calc
One good reference is http://css-tricks.com/a-couple-of-use-cases-for-calc/
In the following example I have
.boxed {
max-width:calc(100% - 200px);
}
http://jsfiddle.net/AuroraArcade/42g5mw80/2/
In order to make the infobar 200px wide you either have to use box-sizing:border-box on the element or you can adjust the inner width or you can remove the borders and spacing.
One example
.infobar {
width: 200px;
box-sizing: border-box;
border: 1px solid rgb(240,240,240);
overflow: auto;
max-height: 100%;
}
Here is my DOM:
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
and my CSS:
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?
td tags are forced to take up all of the remaining space in their parent.
So, your width: 10%; is completely ignored by the layout.
See this non-working JSFiddle Demo.
But, if we add some display: inline-block; to the td, then it fixes the problem.
See this (now) working JSFiddle Demo.
I suggest you add another td tag, and give it a width of 90%
<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
}
table {
height: 100%;
width: 100%;
}
td.td1 {
border: 1px solid gray;
height: 10%;
width: 10%;
}
td.td2{
border: 1px solid gray;
width: 90%;
}
tr.tr1{
height:10%;
}
tr.tr2{
height:90%;
}
For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/
I've got HTML structure like this :
<div class="wrapper">
<table>
<tbody>
<tr>
<td>some content</td>
</tr>
</tbody>
</table>
</div>
My wrapper style is like this :
.wrapper{
color: #444444;
height: 165px;
line-height: 135%;
margin-top: 10px;
padding-bottom: 10px;
width: 270px;
}
and my table has only width defined along with some inherited styles :
.wrapper> table {
width: 100%;
}
table {
background-color: transparent;
border-collapse: collapse;
border-spacing: 0;
max-width: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
What I want to do is that my table consumes maximum height of parent element that is .wrapper whose height value is 165px but for some reason table height is not decreasing.
My end goal was to set a y-overflow on wrapper so if table gets bigger that .wrapper that user can scroll, what am I missing here any hints?
When I change table height to be > then 190px, the table reacts it grows bigger, but if I change to smaller size i.e. 165px or any below 190px it doesn't seem to respond
Addig height: 100% to the table style does make it inherit the height from the parent element:
.wrapper> table {
width: 100%;
height: 100%;
}
Demo: http://jsfiddle.net/WDFa2/
Note: The height that the table inherits is the specificed height of the parent, i.e. 165px, not the height including padding, i.e. 175px.
If you want it 100% high, give it height: 100%. Currently you don't specify the height at all.
Remember that tables tend to not obey all height rules. If the content doesn't fit, they may be a little stubborn. ;)