I have this nested table. In one of the <td> I'd like to have a scrollable div.
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:scroll;'>This DIV should have a large width</div></td>
</tr>
</tbody>
</table>
When I insert 800px as the div width, it is displayed correctly. But, If I insert 1000px the display output is broken. Ideally, I need it up to 5000px++.
I'm not sure if this is what you wanted. This will keep your requested 5000+px width all the time, while inside a smaller scrollable div. (btw overflow-x: auto; means that it will only show the scrollbar when the content is actually overflowing rather than all the time)
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;" border'1px'>
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:800px;overflow-x:auto;'>
<div style='width:5000px;'>This DIV should have a large width</div>
</div></td>
</tr>
</tbody>
</table>
I hope this helps :)
I think you need to have your width as 25% and 75% since in your <thead> the first two columns account for 25% and the third 75%. So your translate the same to the <tbody>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<table class="table table-bordered" style="width:100% !important; font-size:10px; height:inherit;">
<thead>
<tr>
<th style="text-align:center;vertical-align:middle;width:5% !important;">NO</th>
<th style="text-align:center;vertical-align:middle;width:20% !important;">NAME</th>
<th style="text-align:center;vertical-align:middle;width:75% !important;">LOCATION</th>
</tr>
</thead>
<tbody>
<tr style="padding:0px;">
<td colspan='2' style="padding:0px;width:25% !important;">COLUMN 1</td>
<td style="padding:0px;">
<div style='width:75% !important;overflow-x:scroll;position:relative;'>This DIV should have a large width</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Related
I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
Here I want horizontal scroll for table with id "datavaulttable" I have tried with overflow-x and display:block property but it is not working, while specifying overflow-x property I also set width property like width:200px still it not working.
<body style="overflow-y: scroll; height: 100px">
<div>
<table id="tbluserfolder">
<tr>
<td>
<button id="addbutton" class="btn"
style="background-color: lightgray" onclick="folderInfo()">
<img src="/BoardUI/img/plussign.jpg" height="50px" width="50px" />
Add Folder
</button>
</td>
</tr>
</table>
<table class="foldertable table-bordered" id="datavaulttable" >
<!--
table-striped
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead> -->
</table>
<table class="table table-striped table-bordered" id="fileinfo">
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead>
</table>
</div>
</body>
i just added div tag , wrapped table with div
<div style="overflow-x: scroll; width: 99%">
<table class="table table-bordered" id="datavaulttable">
<!--
table-striped
<thead>
<tr>
<th>File</th>
<th>Created On</th>
<th>Created By</th>
</tr>
</thead> -->
</table>
</div>
If you are using bootstrap the by adding class
table-responsive
https://jsfiddle.net/fb7xLmx2/
overflow-x:scroll is working
<div class="scrollmenu">
Your table code comes inside that div with class scroll menu.
I'm using Bootstrap tables to make a Gantt chart. My for times are the same width. For the I have set the colspan="15" and inside of that I am putting a div and setting it to the width that I want. What I want is the vertical borders from the to continue through the entire body of the table, even though the is a different width. Is this possible? Here is my code:
<div class="table-responsive gantt-chart">
<table class="table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
And here is a screenshot of what it looks like:
The black lines I've drawn on there to indicate what I want to do with each section. I'm not sure if this is possible or if I will need to find another way. I'm using php to input the blue divs in the correct locations to match up to the time listed.
As the previous solution (see below) fails in some cases, and you have already added jQuery to the project (needed by Bootstrap), here is another example of how it could be done with JavaScript and that may be better:
Add the vertical bars dynamically (they could be divs)
Place them behind the table
Set the position according to each row
Readjust their position when the page is resized.
Something like this (you can also see it on this JSFiddle):
function setVerticalBars() {
var x = 0;
// for each cell with a .time class
$(".time").each(function() {
// create the vertical line if it doesn't exist
if (!$("#vertical-bar-" + x).length) {
$(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
}
// select the vertical bar associated to this cell
var bar = $("#vertical-bar-" + x);
// place it in he same position as the cell
bar.css("left", $(this).position().left);
// increase the counter to avoid duplicated id's
x++;
});
}
// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
.mygantt .vertical-bar {
width:1px;
background:rgba(0,0,0,0.1);
position:absolute;
top:0;
bottom:0;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-chart {
position:relative;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart mygantt">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
This solutions adjust betters to the table and the changes that could happen when the user resizes the window. I think it's better than the previous one, but I'll leave the old one below for reference.
EDIT - Previous solution:
As I mentioned in the comments, one possible solution would be to add a background image to the table that mimics the vertical lines. That can be achieved with this:
.mytable {
background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}
Now you need to fix one more issue: the Bootstrap table-stripped style has one row transparent and the next one gray. You will be able to see the vertical lines through only the even rows but not through the odd ones. To fix this, change the background of the odd lines from gray to a semitransparent color:
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
And that should do the trick. You can see a demo on this JSFiddle: http://jsfiddle.net/8su2cr5m/
One problem with this solution: the background image will work as long as the cells have the expected width; if they don't (e.g.: when the table would occupy more than 100%, the cells may be resized so the table fits in the available space). A solution for this could be to calculate the width in JS and resize the background image accordingly.
Here's the full code for your case (you can see the issue that I specified in the paragraph above, but if you go full-screen then the issue is gone):
/* set the table background to mimic the vertical bars bars */
.mytable {
background:url(http://i.imgur.com/8jNZRyf.png) repeat-y right top;
}
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
function setVerticalBars() {
var x = 0;
// for each cell with a .time class
$(".time").each(function() {
// create the vertical line if it doesn't exist
if (!$("#vertical-bar-" + x).length) {
$(".mygantt").append('<div id="vertical-bar-' + x + '" class="vertical-bar"></div>');
}
// select the vertical bar associated to this cell
var bar = $("#vertical-bar-" + x);
// place it in he same position as the cell
bar.css("left", $(this).position().left);
// increase the counter to avoid duplicated id's
x++;
});
}
// adjust the divs on page load and when the page is resized
$(document).ready(setVerticalBars );
$(window).on("resize", setVerticalBars );
/* make the odd trs semitransparent instead of gray (so you can see the bars through them) */
.mytable>tbody>tr:nth-child(odd)>td {
background:rgba(0,0,0,0.05) !important;
}
.mygantt .vertical-bar {
width:1px;
background:rgba(0,0,0,0.1);
position:absolute;
top:0;
bottom:0;
}
/* Styles from question */
th.time, td.time {
width:48px;
}
.gantt-chart {
position:relative;
}
.gantt-line {
background:blue;
height:8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="table-responsive gantt-chart mygantt">
<table class="mytable table table-bordered table-striped">
<tbody>
<tr>
<th>Time</th>
<th>Event</th>
<th>Location</th>
<th class="time">8am</th>
<th class="time">9</th>
<th class="time">10</th>
<th class="time">11</th>
<th class="time">12</th>
<th class="time">1</th>
<th class="time">2</th>
<th class="time">3</th>
<th class="time">4</th>
<th class="time">5</th>
<th class="time">6</th>
<th class="time">7</th>
<th class="time">8</th>
<th class="time">9</th>
<th class="time">10pm</th>
</tr>
<tr>
<td>11:00 am</td>
<td>Awesome party</td>
<td>Party room</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:144px; width:48px;"></div>
</td>
</tr>
<tr>
<td>1:15 pm</td>
<td>Test Event</td>
<td>Home</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:252px; width:48px;"></div>
</td>
</tr>
<tr>
<td>3:15 pm</td>
<td>Chad event</td>
<td>tu casa</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:348px; width:72px;"></div>
</td>
</tr>
<tr>
<td>9:00 pm</td>
<td>Randomness</td>
<td>Random Hall</td>
<td class="gantt-section" colspan="15">
<div class="gantt-line" style="margin-left:624px; width:72px;"></div>
</td>
</tr>
</tbody>
</table>
</div>
I wanted a html page which has a html header and a table header to have non scrollable feature. Only the table contents should be scrollable.
For ex:
<html>
<body>
<h1>header</h1>
<h1>header2</h1>
<table>
<thead>
<tr>
<th>name</th>
</tr>
<tr>
<th>address</th>
</tr>
</thead>
<tbody>
<tr>
<td>Venkat</td>
</tr>
<tr>
<td>bangalore</td>
</tr>
//this part will be repeating
</tbody>
</table>
</body>
</html>
I want only the contents in the table body to be scrollable.
I had referred the following link also How do you create non scrolling div at the top of an HTML page without two sets of scroll bars
But i cannot use the div to only contain headers and table header..
I have created a fiddle with a situation similar to mine. Please have a look http://jsfiddle.net/VenkateshManohar/bU7NN/
You will can find a jQuery plugin here that will do it for you ;)
You can try like this: LINK
HTML Code:
<div class="dataGridHeader">
<div class="dataGridContent">
<table cellpadding="0" cellspacing="0" class="scrolltablestyle style-even">
<thead>
<tr>
<th width="160">Shopper Name</th>
<th width="160">First Name</th>
<th width="160">Last Name</th>
<th width="160">User ID</th>
<th width="160">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td width="160">C2C Fishing</td>
<td width="160">John</td>
<td width="160">Doe</td>
<td width="160">C2C Fishing</td>
<td width="160">Enabled</td>
</tr>
.
.
.
.
</tbody>
</table>
</div>
</div>
Hope this helps
Is there any way to make the header align towards right?
Tested in Internet Explorer 7 only.
<html>
<style type="text/css">
th {
text-align: left;
}
</style>
<body>
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag
<th style="width: 100px; text-align: right;">Duration
</tr>
</thead>
<tbody>
<tr>
<td > one
<td> two
</tr>
</tbody>
</table>
</body>
</html>
First, close your tags. You have a lot of invalid HTML here. Second, you're mixing the table width (100%) as a percentage and the cell widths (250px, 100px) as pixel widths. These two are not compatible. Choose either one or the other and keep it consistent throughout your table.
<table style="width:350px" border="1">
<thead>
<tr>
<th style="width:250px;">Tag</th>
<th style="width:100px; text-align:right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td>one</td>
<td>two</td>
</tr>
</tbody>
</table>
You aren't closing your TH tags (or your TD tags for that matter). Fix below:
<table width="100%" border="1">
<thead>
<tr>
<th style="width: 250px;">Tag</th>
<th style="width: 100px; text-align: right;">Duration</th>
</tr>
</thead>
<tbody>
<tr>
<td> one </td>
<td> two </td>
</tr>
</tbody>
</table>