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. ;)
Related
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.
How can one size elements in a table using both a percentage width and a fixed amount of padding for each element?
Specifically, I would like all columns except for the last to have a padding-right: 20px and I would like to size the widths of the columns using percent. I thought that the following css (scss actually) would do it:
table {
width: 200px;
table-layout: fixed;
colgroup {
.c1 {
width: 50%;
}
.c2 {
width: 40%;
}
}
td {
border: 0px;
padding-left: 0px;
padding-right: 20px;
word-break: break-all;
}
td:last-child {
padding-right: 0px;
}
}
Here's a jsfiddle for the above:
https://jsfiddle.net/speedplane/w0aLar56/4/
The SCSS should result in a table with columns that add up to 200px, but on Chrome they only add up to 192px and on Firefox they add up to 196px. I'm clearly doing something wrong.
How should one set fixed padding and percent width to table cells?
I suppose different browsers have different defaults for border-spacing because border-spacing: 0px; on the table seems to fix it.
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%;
}
I would like to have a table which in the columns can stretch but I'm having a little trouble with min and max width in css.
It also seems that theres some conflicting answers around how this works:
min/max width should work: Prevent text from overlap table td width
min/max width are unsupported: Min-width and max-height for table attributes
I would like to have the following
table{
width:100%;
}
.a, .b, .c
{
background-color: red;
}
.a
{
min-width: 10px;
max-width: 20px;
}
.b
{
min-width: 40px;
max-width: 45px;
}
.c
{
}
<table>
<tr>
<td class="a">A</td>
<td class="b">B</td>
<td class="c">C</td>
</tr>
</table>
Is there a way of achieving this without javascript (ie constrained stretching of columns with a table)?
I only need this to work with CSS3 + HTML5
a jsfiddle with stuff not expanding: http://jsfiddle.net/4b3RZ/10/
if I set only min-width on the columns i get a proportional stretch:http://jsfiddle.net/4b3RZ/8/
below is a table of what actually gets rendered for some different css setups:
Tables work differently; sometimes counter-intuitively.
The solution is to use width on the table cells instead of max-width.
Although it may sound like in that case the cells won't shrink below the given width, they will actually.
with no restrictions on c, if you give the table a width of 70px, the widths of a, b and c will come out as 16, 42 and 12 pixels, respectively.
With a table width of 400 pixels, they behave like you say you expect in your grid above.
Only when you try to give the table too small a size (smaller than a.min+b.min+the content of C) will it fail: then the table itself will be wider than specified.
I made a snippet based on your fiddle, in which I removed all the borders and paddings and border-spacing, so you can measure the widths more accurately.
table {
width: 70px;
}
table, tbody, tr, td {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
.a, .c {
background-color: red;
}
.b {
background-color: #F77;
}
.a {
min-width: 10px;
width: 20px;
max-width: 20px;
}
.b {
min-width: 40px;
width: 45px;
max-width: 45px;
}
.c {}
<table>
<tr>
<td class="a">A</td>
<td class="b">B</td>
<td class="c">C</td>
</tr>
</table>
This is probably the most unusual CSS behavior I have ever seen:
I have an extremely simple table that consists of two cells - one with plain text and another with a link:
<div class="content">
<table>
<tr>
<td>
Hello, world!
</td>
<td>
Hello, world!
</td>
</tr>
</table>
</div>
I have also applied the following CSS to the table:
div.content {
background-color: green;
height: 100px;
}
table td {
background-color: red;
height: 50px;
}
table td a {
background-color: orange;
box-sizing: border-box;
display: block;
height: 100%;
padding: 8px;
width: 100%;
}
When rendered in Chrome 28, I see the following:
Why is there a large amount of red above and below the link? I have specified height: 100%; for the link, so it should be taking up the full height of the <td>, which has an explicit height.
It's definitely an issue with the box-sizing:border-box attribute. My guess is that putting that inside a table cell (which is treated differently then a div) is confusing the browser. Often, new techniques + old techniques don't mix.
I would suggest doing the following:
table td a {
background-color: orange;
display: block;
height: 100%;
padding: 8px;
}
The width:100% was unneeded since the table cell already expanded to the text width + padding width. For some reason, it doesn't seem to add the padding to the height 100% with the table cell (go figure, weirdness with tables! lol). If you need it to expand to a larger table cell width, I would suggest then putting the width:100% back but then ditch the horizontal padding (i.e. put padding:8px 0px;).
As far as I think its the box-sizing attribute causing this, change your css to:
table td a {
background-color: black;
height: 100%;
display:block;
margin: 0;
padding: 0px;
width: 100%;
padding-top: 12px;
}
Hope that helps;
Add This Code to table td:
display:inline-block;
because There is some difference between tables and divisions in box modeling.
you must set display-block on any none-block element for apply box-model style.
Try setting height in px for a as
table td a {
background-color: orange;
box-sizing: border-box;
display: block;
height: 50px;
padding: 8px;
width: 100%;
}
here's an example of a jury-rig: http://jsfiddle.net/rTAwd/
We're using a line height to adjust the cell's height, so we don't need to mess with vertical alignment, and relying on a wrapper div to provide our background and padding.
<div class="content">
<table>
<tr>
<td>Hello, world!</td>
<td>
<div> Hello, world!</div>
</td>
</tr>
</table>
</div>
css
div.content {
background-color: green;
height: 100px;
}
table td {
background-color: red;
}
table td div a {
line-height: 2em;
}
table td div {
background-color: orange;
padding: 8px;
}
I think its a bug, i had the same issue a while ago, if you want the text to vertically align in the middle, instead of using display:block on the <a> tag use display:table and use border-spacing instead of padding, like this:
table td a {
background-color: orange;
display: table;
height: 100%;
border-spacing: 8px 13px;
}
I removed the width:100% too since it will do it by default, you can see an example here.
border-spacing is the CSS property for cellpadding.