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;">
Related
I am struggling to keep a table within a table to stay at a set width and in mobile to have a horizontal scroll.
That way nothing gets squished and i can maintain readability. I am attempting to use pure CSS before resorting to javascript/jQuery.
Current example:
(LINK HAS BEEN REMOVED)
The DOM structure i currently have:
<table>
<tr>
<td>Vessel name and $</td>
<td>
<div class="container">
<table>
<tr>
<td>Sold</td>
<td>Sold</td>
<td>Available</td>
<td>Sold</td>
</tr>
</table>
</div>
</td>
<td>Proceed button</td>
</tr>
</table>
The table in the container i want to keep at a set width e.g 500px and when we go into mobile i'd like to be able to have a horizontal overflow so users can swipe/scroll through the availability for that particular vessel.
I have a development page which illustrates what i'd like to achieve, it also contains CSS that i've used so far (note, still tinkering).
(LINK HAS BEEN REMEOVED)
A possibility would be media queries, to make the div scrollable on small resolutions.
#media(max-width: 767px) {
.container {
overflow-x: scroll;
}
}
How could I make it so that a table inside a container with its own width does not follow the width of the container and instead, retain the table's width when it's not inside the container. I have a very wide table that I want to fit inside a col-md-9 container and it displays bad because it squeezes the table to fit to the container. I have tried min-width for the table but it is not flexible as adding more columns to my table will squeeze it again. Would it be possible to make the table's width auto while not following the parent's width?
<div class="col-md-9" style="overflow-x: auto">
<table class="table table-bordered" style="width:auto">
<tbody>
<tr>
.... contents
</tr>
<tbody>
</table>
</div>
Here is one possiblity for you if you are using Bootstrap 3
live view: http://fiddle.jshell.net/panchroma/vPH8N/10/show/
edit view: http://jsfiddle.net/panchroma/vPH8N/
I'm using the resposive table code from http://getbootstrap.com/css/#tables-responsive
ie:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
#Ciwan. You're right. The table goes to full width (much too wide). Not a good solution. Better to do this:
css:
.scrollme {
overflow-x: auto;
}
html:
<div class="scrollme">
<table class="table table-responsive"> ...
</table>
</div>
Edit: changing scroll-y to scroll-x
You can also check for bootstrap datatable plugin as well for above issue.
It will have a large column table scrollable feature with lot of other options
$(document).ready(function() {
$('#example').dataTable( {
"scrollX": true
} );
} );
for more info with example please check out this link
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}
I currently have:
<div class="generic-block-70">
<div class="generic-content-70">
<table id="voteBlock">
// stuff
</table>
</div>
</div>
However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.
Is there a way around this?
JSFiddle: http://jsfiddle.net/2vLEL/
Set overflow: auto; on your parent div.
http://jsfiddle.net/2vLEL/2/
.generic-content-70 {
overflow: auto;
}
I think I probably had a similar problem. This is how I solved it.
I have nested tables within tables.
Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell.
In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .
So, the html created from my javascript might look like this.
<table id="root">
<tr id="A">
<td id="1" style="width:200px">Content</td>
<td id="2" style="width:530px">
<div height="correct_height" overflowY="auto">
<table id="comments_table" style="width:510px table-layout:fixed">
<tr>
<td style="word-wrap:break-word">
<div style="width:480px;white-space:nowrap">Comments</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
.
.
.
</table>
The first <td id="1"> is created by a function that runs first.
The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row.
The widths are arranged as such to allow space for the vertical scroll bar to appear.
You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:
var correct_height = A.offsetHeight - 20;
The code depends on the intention:
If you want to lock the table to a height, give it a height: NNpx;
If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs
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 ;)