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());
});
Related
I'm trying to set the maximum width of a table, but it doesn't seem to be working. If a word inside the table is too long, it automatically expands the width of the table. How do I stop that from happening, and instead have the word that's too long go to the next line?
<style>table {
max-width: 300px;
}
table,
td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello
</div>
</td>
</tr>
</table>
If you want to make your max-width to work, you need to set the CSS property table-layout: fixed; on the table and use width, not max-width.
https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout
Add the following rule your css section.
div{
overflow-wrap: break-word;
max-width: 300px;
word-wrap: break-word; will work if you have width assigned to the container, you are applying this property to. Thus, you will have to assign width:100px; or desired width to div tag.
<style type="text/css">
div {
width: 100px; /* this will limit the length of the word to 100px */
border: 1px solid blue;
word-wrap: break-word;
}
</style>
Putting max-width inside the div solves the problem.
<style>
table,td {
border: 1px solid red;
}
div {
border: 1px solid blue;
word-wrap: break-word;
max-width: 300px;
}
</style>
<table>
<tr>
<td>
<div> hellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohellohello </div>
</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.
I have a table. Its <td> have overflow: auto.
The width is set to be 100px. In Firefox only, text that exceeds 100px is not hidden and replaced with a scrollbar.
How can I hide content and have a scrollbar when it exceeds the width of its container?
http://jsfiddle.net/be6tM/10/
this question from here maybe solve your problem
nickb answer: "Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not."
try to put your overflow:auto to the wrapper hope this can help you
pre, div {
width:100%;
overflow: auto !important;
}
working demo
The easier way to do this would be to add this to the Html
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
and this to the CSS
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
Working Example:
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
<table>
<tr>
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
</tr>
</table>
This fiddle demonstrates the issue: http://jsfiddle.net/wrYsx/
Related code:
<style>
#floater {
background-color: red;
height: 35px;
width: 35px;
float: right;
}
table {
width: 100%;
}
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
}
</style>
<table>
<tr>
<td>
<div id='floater'></div>
some text
</td>
</tr>
</table>
<table>
<tr>
<td>
some text
</td>
</tr>
</table>
Basically, if I have a td with a given height, I can use vertical-align: middle to center things in the td. However, when there is another element inside the td that is floated (right in my case) then the vertical-align is not respected and the text sits at the top of the td. Any ideas how to style this so you can have a td with vertical-align and floated elements?
Also, I found this post: stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate however it's not a solution for me, since I will likely need to have floated elements. I've tried using positioning to mimic the same layout but it doesn't seem I can position a td cell so that I can use position: absolute inside it to position the "floated" element at right: 0.
Try adding an empty element to the td.
<span class="vertical_aligner"></span>
.vertical_aligner {
vertical-align: middle;
height: 100%;
display: inline-block;
}
Absolute positioning seems to do the job. You just need to make sure you put position:relative on the TD.
#floater {
background-color: red;
height: 35px;
width: 35px;
position:absolute;
top:0;
right:0
}
table {
width: 100%;
}
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
position:relative;
}
You can set the line-height on the table cell to match the cell's height to fix this.
jsFiddle example
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
line-height:35px;
}
Note that this will only work in the text in the cell occupies one line.
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!