table exceed on containers wrapper - javascript

So below I have 2 test, first one has a auto width while the second one has a fixed width (specified width given through a window load event) and both has a style of 'overflow auto'. Is there a way I could automatically make the table get inside its container div and not exceed its parent div width like it reject the behaviour of a child over its parent container?. I prefer not to specified the width of the parent just to simply fix the problem (it must be auto width to cater its responsiveness). Any help, clues, suggestions, ideas, recommendations are greatly appreciated, thank you.
$(window).load(function(){
//set the width of the #test2
$("#test2").css({ 'width' : $("#test2_wrapper").width() + 'px', 'margin' : '0px auto' });
alert("#test2 div, has a width of "+$("#test2_wrapper").width()+"px");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div style="overflow:auto;width:100%;border:1px solid blue;">
<h3>Without specifying width on the container</h3>
<div style="overflow:auto;">
<table class="table table-hover">
<thead>
<tr>
<td>Username</td>
<td>Real Password</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Address</td>
<td>Age</td>
<td>Gender</td>
<td>Martial Status</td>
<td>Civil Staus</td>
<td>Mother's Maiden Name</td>
<td>Father's name</td>
<td>Contact number incase of emergency</td>
<td>Status</td>
<td>STTR</td>
<td>BIR</td>
<td>SSS</td>
<td>Identity number</td>
<td>Student ID number</td>
<td>Employee number</td>
<td>Have you ever tried taco</td>
<td>Will this is a test to see the tables full length</td>
<td>Will, the world aint no sunshine and rainbows</td>
<td>If you dont work hard, you'll end up in a lossers corner</td>
<td>This is the end of the test</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div id="test2_wrapper" style="width:600px;border:1px solid red;">
<h3>With specifying width on the container</h3>
<div style="overflow:auto;border:1px solid pink;" id="test2">
<table class="table table-hover">
<thead>
<tr>
<td>Username</td>
<td>Real Password</td>
<td>Firstname</td>
<td>Middlename</td>
<td>Lastname</td>
<td>Address</td>
<td>Age</td>
<td>Gender</td>
<td>Martial Status</td>
<td>Civil Staus</td>
<td>Mother's Maiden Name</td>
<td>Father's name</td>
<td>Contact number incase of emergency</td>
<td>Status</td>
<td>STTR</td>
<td>BIR</td>
<td>SSS</td>
<td>Identity number</td>
<td>Student ID number</td>
<td>Employee number</td>
<td>Have you ever tried taco</td>
<td>Will this is a test to see the tables full length</td>
<td>Will, the world aint no sunshine and rainbows</td>
<td>If you dont work hard, you'll end up in a lossers corner</td>
<td>This is the end of the test</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>

Related

Make first two columns sticky in a table

I need to make the first two columns sticky in a table having n number of columns each of dynamic width.
I had tried the below CSS
td:nth-child(1), td:nth-child(2){
position:sticky;
left:0px;
}
And then I had set the left position of second column in JS by calculating the width of first column
var width = $("table tr > td:nth-child(1)").outerWidth();
$("table.matrix_class tr > td:nth-child(2)").css('left', width);
Now I need to do all the stuff in CSS not in JS. How do I do that in pure CSS?
Additionally, how do you do this when the first column width is dynamic?

You can do sticky header with using this css.
live working demo
<div class="zui-wrapper">
<div class="zui-scroller">
<table class="zui-table">
<thead>
<tr>
<th class="zui-sticky-col">Name</th>
<th class="zui-sticky-col2">Number</th>
<th>Position</th>
<th>Height</th>
<th>Born</th>
<th>Salary</th>
<th>Prior to NBA/Country</th>
</tr>
</thead>
<tbody>
<tr>
<td class="zui-sticky-col">DeMarcus Cousins</td>
<td class="zui-sticky-col2">15</td>
<td>C</td>
<td>6'11"</td>
<td>08-13-1990</td>
<td>$4,917,000</td>
<td>Kentucky/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Isaiah Thomas</td>
<td class="zui-sticky-col2">22</td>
<td>PG</td>
<td>5'9"</td>
<td>02-07-1989</td>
<td>$473,604</td>
<td>Washington/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Ben McLemore</td>
<td class="zui-sticky-col2">16</td>
<td>SG</td>
<td>6'5"</td>
<td>02-11-1993</td>
<td>$2,895,960</td>
<td>Kansas/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Marcus Thornton</td>
<td class="zui-sticky-col2">23</td>
<td>SG</td>
<td>6'4"</td>
<td>05-05-1987</td>
<td>$7,000,000</td>
<td>Louisiana State/USA</td>
</tr>
<tr>
<td class="zui-sticky-col">Jason Thompson</td>
<td class="zui-sticky-col2">34</td>
<td>PF</td>
<td>6'11"</td>
<td>06-21-1986</td>
<td>$3,001,000</td>
<td>Rider/USA</td>
</tr>
</tbody>
</table>
</div>

HTML / Javascript - Expand and collapse table rows (childs) by clicking on a parent row

I am trying to solve one issue since days and finally understood that I will not succeed without help ... I want to do a common thing that we see on internet everyday : be able to click on a table row in order to show more details. But here more details does not mean a block of text but child rows which have same shape as parent rows.
Here is an example of HTML table :
<table class="collapse table">
<tr>
<th>Age</th>
<th>Sex</th>
<th>Name</th>
<th>From</th>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td>UK</td>
</tr>
The number of child and parent is flexible, I would like a example which manage flexible with that characteristic . Child rows will have to be closed when the page is load, and expand only if the user click on the parent one.
If it is also possible I would like to add an icon which indicates to user the ability to click on a row ( basically a "+" and a "-" ), but not a simple string, a real icon.
I have seen and followed many examples, but no one of them did the job perfectly and tried to modify examples ... no success. Most of them were examples based on Datatables and I do not want to use it.
Can you help me please ? I know that my question is quite full and I am asking for a big part of work, but did not find a complete example to do what I want using HTML,CSS,Javascript only.
Thank you.
Edit after Andrei Gheorghiu's answer :
I would like finally being able to click only on the icon rather than on the entire row, I have others buttons on the same row, and if I click on, it actives the child opening. So what I did, waiting a better solution :
HTML :
Changing "tr" to a specific "td" class and add the icon line within this "td.toto" class.
JS :
$('table').on('click', 'td.toto', function(){
console.log("Check click works: ");
$(this).closest('tbody').toggleClass('open');
});
So is it possible to follow your solution structure, but only change the click target ? By better solution, I meant, to click only on the icon rather than on the entire "td" now.
Thank you.

You will need to wrap each group of parent + children in a <tbody> for this and use a small script to toggle a class name on this parent <tbody>. Here's an example:
$('table').on('click', 'tr.parent .fa-chevron-down', function(){
$(this).closest('tbody').toggleClass('open');
});
.parent ~ .cchild {
display: none;
}
.open .parent ~ .cchild {
display: table-row;
}
.parent {
cursor: pointer;
}
tbody {
color: #212121;
}
.open {
background-color: #e6e6e6;
}
.open .cchild {
background-color: #999;
color: white;
}
.parent > *:last-child {
width: 30px;
}
.parent i {
transform: rotate(0deg);
transition: transform .3s cubic-bezier(.4,0,.2,1);
margin: -.5rem;
padding: .5rem;
}
.open .parent i {
transform: rotate(180deg)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<div class="container">
<table class="table">
<tr>
<th>Age</th>
<th>Sex</th>
<th>Name</th>
<th colspan="2">From</th>
</tr>
<tbody>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
</tbody>
<tbody>
<tr class="parent">
<td>100</td>
<td>M</td>
<td>Dodo</td>
<td>UK</td>
<td><i class="fa fa-chevron-down"></i></td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
<tr class="cchild">
<td>10</td>
<td>M</td>
<td>Child</td>
<td colspan="2">UK</td>
</tr>
</tbody>
</table>
</div>

How can I have bootstrap textarea that will expand for all the column in a row

I have the following bootstrap table, I want to add a textarea for a row.
But that text area should expand to all the columns. I have included a image example.
For row 2 I want to have the 4 columns and the textarea. text area should cover all the column as show in the image below.
Is it possible to do?
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
</tbody>
</table>

You can achieve it in the following way--
Add colspan=12 to your <td> which contains the textarea and give the text area width:100%
Working snippet
textarea {
width:100%;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<table id="table" class="table table-bordered">
<thead>
<tr>
<th data-field="state" data-radio="true"></th>
<th data-field="name">Name</th>
<th data-field="starts">Stars</th>
<th data-field="forks">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-table
</td>
<td>526</td>
<td>122</td>
<td>An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup" checked></td>
<td>
multiple-select
</td>
<td>288</td>
<td>150</td>
<td>A jQuery plugin to select multiple elements with checkboxes :)
</td>
</tr>
<tr>
<td><input type="radio" name="radioGroup"></td>
<td>
bootstrap-show-password
</td>
<td>32</td>
<td>11</td>
<td>Show/hide password plugin for twitter bootstrap.
</td>
</tr>
<tr>
<td colspan="12">
<textarea></textarea>
</td>
</tr>
</tbody>
</table>

jQuery Pass td onclick value to other table

I tried finding solution to this problem but I couldnt find the right article
<div class="panel ui-widget-content" id="invoiceList">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoices</span></h2>
<table cellspacing='0' id='header' class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Invoice Total</th>
</tr>
<tr>
<td><a href="#" >INV-Error_Test1</a></td>
<td>22.000000 USD</td>
</tr>
<tr>
td><a href="#" >INV-Error_Test2</a></td>
<td>22.000000 USD</td>
</tr>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceErrors">
<h2>Select a Invoice from the left to view Error Details</h2>
<div class='panel ui-widget-content' id="invoiceHeaders">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Headers</span></h2>
<table class="ui-widget">
<tr>
<th>Invoice Number</th>
<th>Matter Number</th>
<th>Invoice Total</th>
<th>Invoice Tax Total</th>
<th>Invoice Net Total</th>
</tr>
<tr>
<td><%= invoiceNumber%></td>
<td>CC_MAT_1221</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
<td>22.000000 USD</td>
</tr>
<td class = 'error'>File Error : The file does not contain any record delimiters or is in an unsupported format</td>
</table>
</div>
<div class='panel ui-widget-content' id="invoiceLines">
<h2 class="ui-widget-header ui-corner-top" style="cursor: pointer; "><span>Invoice Line Items</span></h2>
<table class="ui-widget">
<tr>
<th>Line Item Number</th>
<th>Line Item Date</th>
<th>Unit Cost</th>
<th>Number of Units</th>
<th>Line Item Total</th>
<th>Task Code</th>
<th>Expense Code</th>
<th>Timekeeper ID</th>
<th>Line Item Description</th>
</tr>
<tr>
<td>2</td>
<td>20150304</td>
<td>2</td>
<td>2</td>
<td>6</td>
<td></td>
<td>E2</td>
<td></td>
<td></td>
</tr>
<td class='error'><%= invoiceNumber%> Line : 2 Invoice does not foot Reported = (22.0)Calculated (18.0)</td>
<tr>
<td>3</td>
<td>20150306</td>
<td>3</td>
<td>3</td>
<td>12</td>
<td>T3</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
</div>
Here is the jsfiddle link http://jsfiddle.net/5n62md3m/
I was able to get the invoice number from invoiceList div as below
$("#invoiceList a").click(function (e) {
console.log('invoice --->'+$(this).text());
});
But am not sure how to send this to invoiceNumber in invoiceErrors div
Could anyone please help me out?

UPDATED ANSWER
Better yet, thanks to one of the comments, give the cell an ID, ex '#invoice-number-error' then target that directly with jQuery, no need for .find(), makes everything faster.
aka:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoice-number-error').text(invoiceNumber);
});
OLD ANSWER
I would suggest giving the table cells classes, I updated your filddle to reflect the one change:
I added the class 'invoice-number' to that cell under #invoiceErrors. Then I updated your function to look like this:
$("#invoiceList").find('a').click(function (e) {
var invoiceNumber = $(this).text();
$('#invoiceErrors').find('.invoice-number').text(invoiceNumber);
});

Give your table an id like mytable then do:
$("#mytable td").eq(0).html( $(this).text() );
Working jsFiddle

table with fixed first header and fixed column

I need to stress that this is about HORIZONTAL scrolling with THE FIRST COLUMN FIXED because most answers are giving me solutions to vertical scrolling.
Is it possible using pure css to have a table that scrolls horizontally but the first header and first column are fixed with the rest of the content scrollable?
For example if I had this table:
<table>
<thead>
<tr>
<th class="head1">Head 1</th>
<th class="head2">Head 2</th>
<th class="head2">Head 3</th>
</tr>
</thead>
<tbody>
<tr>
<td class="col1">Col 1</td>
<td class="col2">Col 2</td>
<td class="col3">Col 3</td>
</tr>
</tbody>
</table>
The head1 and col1 would always be shown with the other columns scrollable.

This is what I was after. The example uses 2 tables that are floated left with an overflow applied to a div that wraps the right most table. Both tables are contained in a div with a fixed width.
<div class="table-container">
<div class="left">
<table>
...
</table>
</div>
<div class="right">
<table>
...
</table>
</div>
</div>
.table-container {
position: relative;
width: 600px;
height: 100%;
display: inline-block;
}
table {
float: left;
}
.right {
overflow: auto;
}

<table >
<tr>
<th>abc</th>
<th>xyz</th>
</tr>
<tr>
<td colspan="2">
<div style="height:50px; overflow:scroll;">
<table>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Please check it. It may be work.

Categories

Resources