This should be simple. I am trying to get a grey bar in a <td> of a table to expand to the full height of the rest of the <tr>. The problem is that the rows and cells are not fixed height.
I'm a believer in table-free layouts, so no need to convert me. I am stuck with a table in this case, so I need to work with it and treat it nicely.
Here's the HTML:
<table>
<tr><td>
<div class="bar"></div>
</td>
<td>
please<br/>
help<br/>
me<br/>
stack<br/>
overflow<br/>
</td>
</tr>
</table>
And the CSS:
td {
border: 1px solid black;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
}
Here's a fiddle: http://jsfiddle.net/DKQVG/4/
Try to add the following css style:
html, body
{
height: 100%;
}
AND
td, table
{
border: 1px solid black;
height: 100%;
}
Working version with just CSS changes: http://jsfiddle.net/wLtCd/1/
Basically, your TD should have a height defined, so a percentage height makes sense for its child nodes.
Secondly, your div needs to have a display property of 'table'
Full CSS:
td {
width: 100px;
border: 1px solid black;
height: 100%;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
display: table;
}
You can remove the width part from above.
Is this what you want?: http://jsfiddle.net/ymu4y/2/
I added the class bar to the <td> instead of the <div>.
I'm not sure if you can accomplish that using just CSS, but I'm not that familiar with CSS so I would just use JQuery instead, always works best for me when I have dynamic sizings.
<script type="text/javascript">
$(document).ready(function () {
$(".bar").height($(".bar").parent().height());
});
</script>
I tested this and it works fine, but if you're looking for a CSS only solution I don't know anymore. Hope that helps!
Related
this fixed-header table deforms column when resizing window horizontally. Is there way to stop that?
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
table th {
border-left: 1px solid blue;
}
table th,
table td {
padding: 5px;
text-align: left;
border-left:1px solid blue;
}
table th, table td {
width: 150px;
}
table thead tr {
display: block;
position: relative;
}
table tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>pick_up_location</th>
<th>destination</th>
<th>instruction</th>
<th>created_at</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12322</td>
<td>Whanga Road</td>
<td>Crescent Street</td>
<td>Call when arrive</td>
<td>123442342331</td>
<td>comming</td>
</tr>
</tbody>
</table>
</body>
</html>
Keep in mind this fixed-header table. Mean when you have 100 rows. you can scroll the row but the header position is fixed. The display block attributes can not be removed.
UPDATE:
With Mark answer, the table looks fine but still deform at small screen. A screenshot of it
To don't have problems with resizing you have to work in height and width with %.
Like : width: 30%;
height: 40%;
Hope help you.
Do not apply an explicit width or height to tag. Instead, give it:
max-width:100%;
max-height:100%;
just modify the last two ccs declarations as follows:
table{
display: block;
position: relative;
}
table tbody {
position : relative;
overflow: auto;
width: 100%;
height: 300px;
}
Adding word-break: break-all; to all the cells makes your code work (almost, since all characters are not of the same width)
See https://jsfiddle.net/3wn1zzfn/
Your problem is that when it is not possible to fit all cells in a table, the width: 150px; is overridden, and widths are now based on length of the line.
The problem here is that you are applying display: block, you shouldn't use it on tables. Also remove px values on tables. use %, or remove it at all
Remove these lines of code:
table th,
table td {
/*width: 150px*/
}
table thead tr {
/*display: block;
position: relative;*/
}
table tbody {
/*display: block;*/
overflow: auto;
width: 100%;
height: 300px;
}
Here a codepen to show it:
http://codepen.io/sandrina-p/pen/qNYork?editors=1100
--EDIT--
before -1 please can you tell me what's wrong with my solution, to improve it?
I know my question is related to this one, but my situation is slightly different and also there is no solution in the other question.
So, I have the following markup:
<table>
<tr>
<td>
<div>I respect max-width</div>
</td>
<td>
<input value="I do not" />
</td>
</tr>
</table>
With the following styles:
table {
width: 200px;
background: #f7f7f7;
}
td {
width: 50%;
background: #e7e7e7;
}
div, input {
display: block;
width: auto;
max-width: 100%;
background: red;
}
This would be the expected result:
But, this is the actual one:
Somehow the auto width of the input field determined by the browser is larger than 50% (100px). That's all fine and dandy, but why isn't it respecting the max-width: 100%?
If I force set width: 100% it works as expected (second image), however that's not what I want. I want it to be as wide as the browser decides is good, just not wider than 100%.
Any ideas?
Here's the fiddle.
That could help you: Fiddle
td {
box-sizing: border-box;
display: inline-block;
width: 50%;
background: #e7e7e7;
}
If you set the table to table-layout: fixed you get the result you want:
table {
width: 200px;
background: #f7f7f7;
table-layout: fixed;
}
input {
display: block;
max-width: 100%;
background: red;
box-sizing: border-box;
}
I know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
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/
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.