anyone has an idea how to add something to the left in the bootstrap-table header? Like on the picture below I want to add an icon (question mark or whatever) to be a clickable link.
jsFIDDLE
<table id="summaryTable">
<thead>
<tr>
<th data-field="id" data-align="center" data-width="20px" >id</th>
<th data-field="name" data-align="center" data-sortable="true">Name</th>
<th data-field="type" data-align="center" data-sortable="true">type</th>
</tr>
</thead>
</table>
You can add an element to every th:
$('#summaryTable thead th').each(function() {
s = $('<span style="position: absolute; left: 4px; top: 8px; cursor: pointer;">?</span>')
s.click(function(e) {
e.stopPropagation();
alert('Question mark clicked')
});
$(this).append(s)
})
Note the e.stopPropagation(); to make sure the clicks on the question mark will not cause also a click on the entire TH
Here is a fork of your jsfiddle:
https://jsfiddle.net/dekelb/e403uvuh/
Related
I have a question about a html table, i know a windows application that has this, a vertical scrollable table, but some columns are fixed on the page and others are always outside the page. I have a example:
The black border is the page, wich is responsive.
The red border is the table.
The green border is the part that is always fullscreen on the page,
always with The same columns.
The blue border is the part thats always off the screen with
information thats not required but if you need it you can scroll to
the right.
Anyone have an idea how to do this? In CSS? Or do i need Javascript for it?
My current code:
This class is attached to the tag.
/*MAIN TABLE*/
.tableMain {
font-size: 13px;
margin: 0;
padding: 0;
width: 200%;
table-layout: fixed;
}
But i think i need 2 classes, 1 on page class, and 1 off page class so i can define the columns that should be ouside the page. But i really dont know how to do that. Currently i've edited my headercells with this idea.
.tableCell, .tableHeaderCell{
width: 8.5%;
}
.tableSecondCell{
width: 150px;
}
This is my current HTML:
<table class='tableMain'>
<thead class='tableHeader'>
<tr class='tableHeaderRow'>
<th class='tableCell'>Name</th>
<th class='tableCell'>Email</th>
<th class='tableCell'>Role</th>
<th class='tableCell'>Username</th>
<th class='tableCell'>Department</th>
<th class='tableSecondCell'>Team</th>
<th class='tableSecondCell'>Web</th>
<th class='tableSecondCell'>App</th>
</tr>
</thead>
<tbody class='tableBody'>
<tr class='tableRow'>
<td class='tableCell'>User Name</td>
<td class='tableCell'>username1#example.com</td>
<td class='tableCell'>employee</td>
<td class='tableCell'>username1</td>
<td class='tableCell'>Support</td>
<td class='tableSecondCell'>Team1</td>
<td class='tableSecondCell'>True</td>
<td class='tableSecondCell'>True</td>
</tr>
</tbody>
</table>
Thanks for your time.
You can use instead below css for the table to scroll
.tableMain {
width: 100%;
max-width: 100%;
}
and wrap a div .table-responsive around table tag
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
I'm using jQuery bootstrap-table plugin and I need to change the color of the checked row and restore the original color when unchecked. This fiddle https://jsfiddle.net/1yvr1kun/4/ shows how to do this when the event is a click. I have tried to implement the idea on a check event but the checked rows do not get highlighted in the set color. Here is my fiddle http://jsfiddle.net/amotha/e3nk137y/9186/ How can I make the change happen on the checked rows and reverse when unchecked?
HTML:
<table id="table" data-toggle="table"
data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/"
data-click-to-select="true"
data-single-select="false">
<thead>
<tr>
<th data-field="state" data-checkbox="true"></th>
<th data-field="name">Name</th>
<th data-field="stargazers_count">Stars</th>
<th data-field="forks_count">Forks</th>
<th data-field="description">Description</th>
</tr>
</thead>
</table>
JS:
$('#table').on('click-row.bs.table', function (e, row, $element) {
$('.success').removeClass('success');
$($element).addClass('success');
});
CSS:
.success td{
background-color:red !important;
}
Just change class name on css
.success td{
background-color:red !important;
}
.selected td{
background-color:#b1d54f !important;
}
http://jsfiddle.net/e3nk137y/9196/
I have a dynamically built table that ends up with the below code (with example values):
<table id="patientTable" class="display" cellspacing="0" width="100%">
<thead id="TableHeader">
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
</tr>
</thead>
<tbody id="tableContent">
<tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
<td class="tableContent">Value1</td>
<td class="tableContent">Value2</td>
<td class="tableContent">Value3</td>
</tr>
</tbody>
</table>
I am trying to highlight the row that is been hovered over using the below CSS:
.clickable :hover {
background-color: #CCC;
}
For some reason, this changes the background of what would be the "<td>" element, for example, will just highlight Value1, Value2 or Value3 rather than the entire row.
I have tried (to no avail) to use:
.clickable tr:hover {
background-color: #CCC;
}
.clickable:hover {
background-color: #CCC;
}
.tr:hover {
background-color: #CCC;
}
.tr :hover {
background-color: #CCC;
}
I find this unusual behaviour, as it appears to work for everyone else on every other example i've seen..
Worth Mentioning: The table is build from a complex system, that basically performs an AJAX request, which performs a PHP database query, takes the values, throws them into a JSON array, passes them back to JS, re-parses the array as JSON, loops through and creates the table, then outputs it. Could the JS be causing the issue?
The class name ".clickable", "row_#" (where # is a number) and the ID for the table row need to stay, as they are used in future functions and provide me with a way to identify each row individually.
One solution is to apply the hover on child elements td's when hover on parent tr:
.clickable:hover td {
background-color: #CCC;
}
<table id="patientTable" class="display" cellspacing="0" width="100%">
<thead id="TableHeader">
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
</tr>
</thead>
<tbody id="tableContent">
<tr class="clickable row_0" onclick="selectPatient(10001);" id="10001" style="background: #FFF;">
<td class="tableContent">Value1</td>
<td class="tableContent">Value2</td>
<td class="tableContent">Value3</td>
</tr>
</tbody>
</table>
This works (from your question) :
.clickable:hover {
background-color: #CCC;
}
but why is there nothing happening when you hover then ?
because this rule is overwritten by the inline style: style="background: #FFF;"
Hint : NEVER write inline style (except if you REALLY need it)
if you remove style="background: #FFF;" everything will be fine.
Working example :
.clickable {
background-color: #FFF;
}
.clickable:hover {
background-color: #CCC;
}
<table id="patientTable" class="display" cellspacing="0" width="100%">
<thead id="TableHeader">
<tr>
<th>Value1</th>
<th>Value2</th>
<th>Value3</th>
</tr>
</thead>
<tbody id="tableContent">
<tr class="clickable row_0" onclick="selectPatient(10001);" id="10001">
<td class="tableContent">Value1</td>
<td class="tableContent">Value2</td>
<td class="tableContent">Value3</td>
</tr>
<tr class="clickable row_1" onclick="selectPatient(10002);" id="10002">
<td class="tableContent">Value1</td>
<td class="tableContent">Value2</td>
<td class="tableContent">Value3</td>
</tr>
</tbody>
</table>
Edit :
For more information about which CSS rule will have priority over others, see this article on MDN : https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity
You can't colour table rows. Colour the table cells (th and td) instead, using the direct child selector (>).
Edit: Apollo (below) is right: Of course you can colour table rows, but if you want to colour the row with a hover, you need this (just like the answer that was given before):
tr:hover > td,
tr:hover > th {
background-color:#ccc;
}
I have the following table structure:
<table>
<thead>
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</thead>
</table>
I am trying to fix the header so that if I scroll down it stays visible.
I looked at this post but couldn't understand it. How can I do this?
I have written the following code in order to achieve my goal (as asked in question)-
Here is the plugin i have written.
(function ($) {
$.fn.scrollbarTable = function (i) {
var o = {};
if (typeof (i) == 'number') o.height = i;
else if (typeof (i) == 'object') o = i;
else if (typeof (i) == 'undefined') o = {
height: 300
}
return this.each(function () {
var $t = $(this);
var w = $t.width();
$t.width(w - function (width) {
var parent, child;
if (width === undefined) {
parent = $('<div style="width:50px;height:50px;overflow:auto"><div style="height:50px;"></div></div>').appendTo('body');
child = parent.children();
width = child.innerWidth() - child.height(99).innerWidth();
parent.remove();
}
return width;
}());
var cols = [];
var tableCols = [];
$t.find('thead th,thead td').each(function () {
cols.push($(this).width());
});
$t.find('tr:eq(1) th,thead td').each(function () {
tableCols.push($(this).width());
});
var $firstRow = $t.clone();
$firstRow.find('tbody').remove();
$t.find('thead').remove();
$t.before($firstRow);
$firstRow.find('thead th,thead td').each(function (i) {
$(this).attr('width', cols[i]);
});
$t.find('tr:first th,tr:first td').each(function (i) {
$(this).attr('width', tableCols[i]);
});
var $wrap = $('<div>');
$wrap.css({
width: w,
height: o.height,
overflow: 'auto'
});
$t.wrap($wrap);
})
};
}(jQuery));
How to use:
$(document).ready(function(){
$('table#tabss').scrollbarTable();
}
hope it will help someone somewhere..
Any way thanks to all of you for your kind support... :)
try this approach but it may not be the best way
<table style="top: 0px; position: fixed; z-index: 1; background-color: White">
<tr>
<th colspan="4">Current</th>
<th colspan="4">New/Requested</th>
</tr>
<tr>
<th nowrap="nowrap">RSD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">CRD </th>
<th nowrap="nowrap">CRSD </th>
<th nowrap="nowrap">MSD </th>
<th nowrap="nowrap">Open QTY </th>
<th nowrap="nowrap">Action</th>
<th nowrap="nowrap">Reason</th>
<th nowrap="nowrap">Action Code Status </th>
</tr>
</table>
<table>
<tbody>
<tr>
<td></td>
<td></td>
.....plenty of rows
</tr>
</tbody>
</table>
what I did is just created another table for header and gave it fixed position
Using css
.fixhead
{
position:relative
overflow:auto;
}
And call this class in or in gridview headerrowstyle tag.
CSS PART----
<style type="text/css">
thead tr { position:relative;
top: expression(offsetParent.scrollTop);
}
</style>
HTML PART----
<table width="100%" border="0" cellpadding="0" cellspacing="0" align="center">
<thead>
<tr>
<td width="1%"></td>
<td>ID</td>
<td>Name</td>
</tr>
</thead>
<tbody>
//////////code
</tbody>
<tfoot>
////////code
</tfott>
</table>
Thanks
Set overflow: auto in the tbody's css.
so I had to create a similar component for my work. (Note: admittedly I did this with jQuery but it can still be accomplished without it.)
The solution i came up with was similar and i thought i'd share it as it is much simplier
http://jsfiddle.net/YYaFr/6/
Basically you wrap the table in a div, copy it (the table) and make the first one just a header table (by removing the tbody) and position it absolute.
<div class="containerdiv">
<table class="headerTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
</table>
<table class="dataTable">
<colgroup>
<col /> * number of columns
....
</colgroup>
<thead>
<th></th>
....
</thead>
<tbody>
<td></td>
....
</tbody>
</table>
</div>
and the css
div.containerDiv
{
height: 300px; // Whatever height you need. can be set inline if you wish
}
div.containerDiv table.headerTable
{
position: absolute;
}
div.containerDiv table.dataTable thead
{
visibility: hidden; // This gives the header table room so it doesn't hide the first row.
}
Then the JavaScript basically creates the colgroups (or you can generate them server-side if you need.) Sets the widths and viola. That seems a lot simpler in my head so go ahead and check out the jsfiddle.
I know that I'm late to the party, but the jQuery Fixed Table Header Plugin by Mustafa OZCAN is fantastic. Just include it, as well as jQuery itself, and set it to work on your table like so:
<script type="text/javascript">
$(document).ready(function() {
$('#YourTable').fixedtableheader();
});
</script>
Replace #YourTable with the ID of your HTML table, and the plugin does the rest.
Alas, how I envy people who get to use jQuery. I created a pure javascript and CSS solution for those who are prevented by application limitations from loading a library.
Basically, CSS positions the table and table header row, and tricks the table into behaving like divs. Then javascript manipulates the CSS positioning of the table header row and a "mask" div that hides the moving rows as the table scrolls up (an improvement would be to modify the javascript to detect collision and hide rows that scroll up past the header).
The weakness of this approach is that you now have to set the widths for all the columns.
The relevant components are:
<!-- divs with IDs are manipulated with javascript -->
<div class="fixedTableHolder">
<div class="maskHolder">
<div id="mask" class="mask"> </mask>
</div>
<div class="fixedTable">
<div id="theTable" class="theTable">
<!-- here is the table, header row must have an ID -->
<table border="0" cellspacing="5" cellpadding="5">
<tr id="thFixed" class="thFixed">
<td class="col1">Header cell 1</td>
</tr>
<tr>
<td class="col1">regular cell</td>
</tr>
</table>
</div>
</div>
</div>
Here is a demo in jsFiddle: http://jsfiddle.net/deborah/Msvvr/
Well, hoping someone will be reading this, and save some time with it :)
My goal was to make a small(as small as possible) js, that will take tableID , and put headers as fixed.
It differs from what is given here with that it recalculates width with window.resize, so it allows tables to be resized dynamically, and no fixed sizes used from the start. And in theory - suppose to work with any table... (that was my case...)
function HeadsUp()
{
var headers = $("#TheGrid tr").first();
headers.css("margin-top", ((headers.height()+1)*-1)+"px");//edit +1 with what you want...
headers.css("position", "absolute");
}
function ResizeHeaders()
{
var grid = $("#TheGrid");
var headers = $("#TheGrid tr").first();
var firstdatarow = $("#TheGrid tr:nth-child(2)");
headers.width(grid.width());
var s = firstdatarow.children("td");
var d = headers.children("th");//replace with td if you use it there
for(i=0; i<s.length; i+=1) {
d[i].width = s[i].clientWidth;
}
}
$(function () {
HeadsUp();
ResizeHeaders();
});
$( window ).resize(function() {
ResizeHeaders();
});
The best option which worked for me is adding the following css properties to the th class in stylesheet.
th
{
position: -webkit-sticky;
position: sticky;
top: 0px;
z-index: 5;
}
I'm attempting to create a table with reorderable columns using jQuery UI's "sortable" interaction. However, I'm having trouble on IE with table-layout: fixed.
The sortable is attached to the table's thead > tr and works just fine. The table looks correct when not dragging a column heading. While dragging, however, IE increases the width of the table to 100% and makes the dragged heading's column wider to make up the difference. I've tried specifying the width via <col> elements (which seem to be completely ignored by IE?), setting widths on each <td>, using forcePlaceholderSize, and combinations of the three, but nothing seems to work.
Code is below and on jsFiddle. Note that the logic to actually swap columns and correct their widths after dragging is finished hasn't been included; right now, I'm only concerned with the (mis-)behavior while dragging.
HTML:
<table>
<col style="width:90px">
<col style="width:130px">
<col style="width:70px">
<thead>
<tr>
<th style="width:90px">width 90</th>
<th style="width:130px">width 130</th>
<th style="width:70px">width 70</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:90px">foo</td>
<td style="width:130px">bar</td>
<td style="width:70px">baz</td>
</tr>
<tr>
<td style="width:90px">wibble</td>
<td style="width:130px">wobble</td>
<td style="width:70px">wubble</td>
</tr>
<tr>
<td style="width:90px">lorem</td>
<td style="width:130px">ipsum</td>
<td style="width:70px">dolor</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: collapse;
table-layout: fixed;
}
td, th {
background: white;
border: 1px solid #999;
padding: 0 .25em;
}
JS:
$("thead tr").sortable({
forcePlaceholderSize: true,
helper: "clone",
tolerance: "pointer"
});