I have a <table> inside a <div> tag, which doesn't want to span as long as it needs to be. I need to specify a width in px for the <table> to span and thus cause the <div> container it is inside to scroll. Otherwise, the <table> just spans to a width of 100%, i.e. the width of the <div>.
My example is as follows:
<div style="width:880px; overflow:scroll;">
<table> // I need to explicitly specify a width for it, otherwise it just span 100% which is incorrect
<tr><td></td><td></td><td></td></tr>
</table>
</div>
I have specified for all the <td> tags a width inside my CSS.
I don't understand why the <table> can't determine it's own width or just respect the widths of all the <td> tags.
Try setting white-space: nowrap; on the td in your table and dump a lot of text inside each td you will start seeing a scroll bar on your div.
Are you sure there isn't any unintended CSS being applied to the table? By default the table only expands to accommodate its columns.
<div style="width:880px; overflow:scroll; background-color: green;">
<table style="background-color: red;">
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
</div>
Using this code, you can see the red table is only as big as its columns in relation to the green div as long as no other CSS is involved.
Use a tool like Firebug or IE's Developer Tools (F12) to see which styles are actually being applied to the table element.
See the example here.
Related
I don't understand the different behavior between these two pieces of HTML:
<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR>
<TD style='height:100px'><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>
JFiddle: https://jsfiddle.net/ceyq6n10/
and
<!DOCTYPE HTML><html><body>
<TABLE style='border:1px solid black'>
<TR style='height:100px'>
<TD><div style='width:100px;height:100%;background-color:#ccc'></div></TD>
</TR>
</TABLE>
</body></html>
JFiddle: https://jsfiddle.net/hmjvu5gf/
In the first example, the DIV is vertically expanded to 100% of the TD height. In the second one, even if the TD has the right vertical size, the DIV has height 0.
Could you please explain me why? Thanks
You use height: 100% for <div>, but didn't specify height to the parent <td>.
If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the used height is calculated as if 'auto' was specified.
css spec about height calculation
So when you use % for setting heights or widths, always set the widths/heights of parent elements as well.
By resizing the cells, we can control the row height.
You should apply such styling rules to the containers that hold actual content inside like text or other html. In this case, you td is actual container for content.
For tr tag, you can only put th or td inside a tr, and not the actual content. Style for screen space applies on tags which are actual content containers (like td, th), or actually themselves can grab screen space. tr is more of row de-marker.
You can apply things like background-color to tr, and it will work for td. Apply screen space rule to more specific content container.
I have a table that contains variable amounts of text in several columns with fixed widths. Some of the columns will allow the text inside of them to grow until it is all showing, but the others will be limited to that height, even if they have text that ends up hidden. Is there any way to do that without any JavaScript?
A couple notes:
I don't know what the text will be so I can't set a concrete height on the row itself.
Previously, I set the height of the text boxes that couldn't grow to be very small, then found them after the page loaded, set their row height to be a concrete number, and set their height to inherit. That was too slow, though, as I will have a lot of rows.
Here is the shell of a table that kind of shows what I'm going for. I need to know how to write out the classes.
<table>
<tr class="rowCanGrow">
<td class="canGrowTD" style="width:90px;">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:80px;">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD" style="width:100px;">
<div class = "canGrow">(Controller) Should see all of this text.Should see all of this text.</div>
</td>
<td class = "cantGrowTD" style="width:100px;">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
Edit Added a space so that the words break correctly and the width's stay consistent, since it's unrelated to what I'm trying to solve.
Edit 2 Clearing up some things. The cells should all have fixed widths (added inline styling) and note that I won't be able to set a concrete height anywhere because I won't know what that is until the text has rendered and set it.
Edit 3 Here is the desired result:
You can set to you div height and width as 100%, with overflow: hidden; to hide scrollbar. Second, you should set the any height of your <td>. So, basically the div's height is that of the containing cell and the text cannot grow the div, keeping the cell/row the same height no matter what the window size is.
td.canGrowTD > div {
width: 100%; height: 100%; overflow:hidden;
}
td.canGrowTD {
height: 20px;
}
<table>
<tr class="rowCanGrow">
<td class="canGrowTD">
<div class = "canGrow">Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">Should see all of this text.</div>
</td>
<td class="canGrowTD">
<div class = "canGrow">(Controller)Should see all of this text.Should see all of this text.</div>
</td>
<td class = "canGrowTD">
<div class = "cantGrow">This one should get cut off mid sentence, and definitely shouldn't be allowed to grow as far down as it wants to grow.</div>
</td>
</tr>
</table>
There is a way to do this as it turns out. Here is the solution:
td {
vertical-align:top;
}
.cantGrowTd {
height:100% !important;
position:relative;
overflow:hidden;
}
.cantGrowTd div.cantGrow {
position:absolute;
height:100% !important;
max-height: initial !important;
overflow: visible !important;
}
You can most likely ignore the "important" statements as they are not required unless your td elements and divs are setting their own properties that need to be overridden (as mine do in my actual application).
<div style="width:500px;">
<p>To create not a block, but an inline code span,use backticks:Press the `<Tab>` key, then type a `$`.If you want to have a preformatted block within a list, indent by eight spaces: </p>
<table>
<thead>
<tr><th>Action</th>
<th>abc</th>
<th>xyz</th>
</tr>
</thead>
<tbody>
<tr><td>hihi</td>
<td>hihi</td>
</tr>
</tbody>
</table>
I set the div of width 500px, and under it I have p and table elemetns. The p element adjust to the width of the div, while the table has its own width, which doesnt necessarily adjust to fit into 500px. I don't know how this works, can anyone explain it to me? Thanks
By default, <table> elements adjust to auto fit their contents. If the contents don't need the full container, the space isnt taken. You can change this behavior by styling the table with:
<table style="width: 100%;">
In which case it will take all available width if possible.
I have a div within which a table would lie. Now I want this div to have its width set automatically to the width of table within it.
For example:
<div>
<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
<tr>
<td>Sample</td>
<td>Table</td>
</tr>
</table>
</div>
I tried giving float: left; property to it. It works, but then it creates another problem. Whatever content is put after this div gets placed to the right of it in the empty space.
What needs to be done?
You are effectively attempting to change the display model of that div element, so you should change it's CSS 'display' property as follows:
div{
display: inline-block;
}
Here's a jsFiddle demonstrating the solution.
You have to clear the float after your div by adding style="clear: left;" on your consecutive element:
<div style="float: left;">
<table>...</table>
</div>
<div style="clear: left;">
...
</div>
This is quite new but...
If you don't want the element to become inline-block, you can do this:
.parent{
width: min-content;
}
You have a lot of other options for configuring the width. Read more here: http://caniuse.com/#search=intrinsic
You need to clear the float explicitly in order to not impair subsequent elements by the float. See this article for details.
If i understand correctly, you want the div to be as wide as the table but not any wider. Since the div-element is a block element, it will always be as wide as it can be unless you give it an explicit width.
Your choice is to either add the style display:inline or use an inline-element like "span".
I'm trying to do the following: http://www.pastebin.org/113337
I'm wondering why the scrolling won't take place? It just stretches the table. Try running the code with and without white-space: nowrap and see how it differs. Whenever I apply nowrap my table gets stretched. How do I avoid this?
I'm pretty sure that's just how tables work; they stretch when there's too much content in one of their cells.
Try putting a <div> inside your <td> and apply the width and overflow properties to that instead.
Addendum:
Your table has a CSS width property of 150px while the div has a percentage, %100. Try giving the <div> a non-percentage width...
<table>
<tr>
<td>
<div style="150px;">
<!-- wtv -->
</div>
</td>
</tr>
</table>
Or try putting the whole <table> in a <div> with a fixed width...
<div style="width:150px">
<table>
<!-- wtv -->
</table>
</div>
... lastly, I'd advise that you put your CSS in an external .css file ;)