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 ;)
Related
I have a table, which extends off the screen to the right (it has fixed with and this width is larger than screen width). Browser automatically creates scroll bar at the bottom. How can I instruct browser, while displaying this table in "invisible" area to the right, not to create a scroll bar? The purpose of this exercise that this table will be scrolled left using Javascript, showing its contents to the right which is initially off the screen.
If I set "overflow:hidden" for the "body", all other content becomes unscrollable in case it does not fit to the screen (e.g. in 1024 browser, as content is optimized for 1280). I need only this table (which is inside two DIVs) not to create browser scroll bar...
Code looks like the following way
<div style="position:relative;overflow:hidden;width:1500px">
<div style="float:left">
<table style="table-layout:fixed;width:1500px">
<tr>
<td style="width:300px">
aaa
</td>
<td style="width:300px">
bbb
</td>
<td style="width:300px">
ccc
</td>
<td style="width:300px">
ddd
</td>
<td style="width:300px">
eee
</td>
</tr>
</table>
</div>
</div>
Add the following CSS rule:
body
{
overflow-x:hidden;
}
EDIT: After seeing your comments, and that the table is within a div I suggest the following. Lets say your markup is:
<div class="tablecontainer">
<table />
</div>
Use the following CSS rule:
div.tablecontainer
{
overflow-x:hidden;
}
Try this
<body style="overflow-x:hidden;">
or use any CSS class to add this property into your body tag.
Put an "overflow-x" styling to it. You can make the overflow hidden or give the div containing the table a horizontal scroll.
Horizontal scroll for overflow
<div class="col-12" style="overflow-x:scroll;">
Hidden overflow
<div class="col-12" style="overflow-x:hidden;">
<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 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.
I want a parent div to stretch when the child table width goes beyond page width.
what would be the best css solution for this?
Setting the div to display: inline-block appears to do the trick.
You can use display: table; as well. (DIV)
In my case (XHTML transitional 1.0 doctype) I had structure like
<div>
<table>
<tr>
<td>
<img width="1800px" height="600px" />
</td>
</tr>
</table>
</div>
As I found in CSS rules, table had
table-layout: fixed;
When I removed this rule, everything got fixed.