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
Related
My table has a nested table for one of its rows. I would like both tables to take up 100% of the parent element width. How do I do that?
Demo
HTML
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
Drawing on the other answers, in a roundabout way, yes they do have an element of correctness, unfortunately none of them has the full story.
As Justinas points out, you're not nesting tables, what you're nesting are rows. While row nesting will indeed work, it is actually now not supported under the new HTML5 schemes.
This means that trying to do what you're doing, will simply not validate, and worse will refuse to render correctly on mobile devices.
Working with your existing code:
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
You can achieve what you're trying to do by adding a width of 100% to the table's style as others have already pointed out, and by adding a width:100% to requestDetailsHeading class.
However, I'm going to take a guess here, and looking at your other class names (specifically container and row) I suspect you might actually be using the Bootstrap CSS framework. If you're not then perhaps you might want to consider doing so, as it will make the task you're trying to do much easier and you'll have less fiddling about to do.
You can download the various CSS files from
http://getbootstrap.com/
And once you have a page set-up with BS in place, you can get the exact effect you want by using the following HTML
<div class="container">
<table class="table">
<tr> <!-- NOTE: Don't use the 'row' class here as BS3 has another use for that -->
<td colspan="3">
row 1
</td>
</tr>
<tr class="requestDetailsHeading">
<td colspan="3">HeadingName</td>
</tr>
<tr class="requestRow">
<td>Name</td>
<td>Date</td>
<td>Age</td>
</tr>
<tr class="requestData">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Even without bootstrap added however, you'll notice that I've simplified the HTML.
To get the effect you're looking for of a 100% row, above each row of data, you don't need to nest things the way you did, you simply just need to tell the td element how many columns it has to span, and as long as that is equal to the rest of the table, you'll end up with a 100% width header across separate columns. If you decide to use Bootstrap, then BS will take care of giving you a 100% table width, otherwise as others have mentioned simply add a width of "100%" to a class that controls the table itself.
Additional (But not required to solve your problem)
If you decide to use Bootstrap as your CSS framework, there is another way that you can achieve what you're trying to achieve, and that's to use the BS3 grid system.
Using 'container' s, 'row' s and 'col-md-xx' style classes, you could very easily do something like the following:
<div class="container">
<div class="row">
<div class="col-md-12">
Row Header Text Goes Here
</div>
</div>
<div class="row">
<div class="col-md-4">Name</div>
<div class="col-md-4">Date</div>
<div class="col-md-4">Age</div>
</div>
<div class="row">
<div class="col-md-4">gg</div>
<div class="col-md-4">dd</div>
<div class="col-md-4">ee</div>
</div>
</div>
Because of the way Bootstrap works, the container will automatically take up 100% of the center column (approx 1024 pixels) and each of your rows will take up the appropriate space in the 12 column grid that's available by default.
Your data rows are set to column widths of 4 grids, as 3 times 4 is 12, and it's easy to repeat the 'div' sections as needed in order to produce as many rows as needed.
Finally, if you use 'container-fluid' rather than 'container' in your outermost div, then your layout will span the entire width of the visible page.
The best part about going the bootstrap route however, is that everything you do using it is automatically responsive, and so will adapt and resize automatically for mobile and desktop as needed, especially if you start using a mixture of 'col-xx-yy' column types, where xx represents the device target size, and yy the number of grid columns you wish to consume.
Fiddle
table{
background-color:white;
width:100%;
}
You don't have nested tables. You have tr > td > tr > td that I think is not valid.
Also, first row don't have td element.
Simply apply width: 100% to all tables:
table {
background-color: white;
width: 100%;
}
.requestDetails {
background-color: red;
}
.container {
width: 600px;
background-color: green;
}
.row {
width: 100%;
background-color: blue;
}
<div class="container">
<table>
<tr class="row">
row 1
</tr>
<tr class="requestDetails row">
<td>
<tr class="requestDetailsHeading">
<td>Headingname</td>
</tr>
<tr class="requestRow">
<td>name</td>
<td>date</td>
<td>age</td>
</tr>
</td>
</tr>
<tr class="row">
<td>gg</td>
<td>dd</td>
<td>ee</td>
</tr>
</table>
</div>
Just add width: 100%; to the table in CSS.
Updated jsFiddle
Readup: CSS width | MDN
Just update your css like below:
.container table{
background-color:white;
width:100%;
}
If the width attribute is not set, table takes up the space it needs to display the table data. so you have to define the width of table.
so just define the width for table in CSS.
.row, table{
width:100%;
background-color:blue;
}
I am using bootstrap 3.2 in my application.
I am wrapping two col-md-6 in a row.
One column is having a some content. The other col is empty
I want the other column to be of same height as the col that is having some text
The height should be fixed height with scroll bar.
I can't set the height manually as height can change
See the attached screen shot
Use col-md-12 instead of col-md-6
<style>
.table tr td{width:50%;}
</style>
<table class="table table-bordered">
<tbody>
<tr>
<td>
Your text
</td>
<td>
</td>
</tr>
</tbody>
</table>
Try this:
DEMO
var height = $("#Col1")[0].clientHeight;
$("#Col2").css('height', height + 'px');
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;">
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 ;)