I am using this react-bootstrap table:
which it's HTML code is:
<Table striped bordered hover>
<thead>
I was trying to add the code here.
<tr>
<th>#</th>
<th>App</th>
<th>Domain Name</th>
<th>Pub Account ID</th>
<th>Relationship</th>
<th>Certification ID</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox" id={'checkboxThick'+network.id} onClick={()=>this.checkCheckbox(network.id)}/></th>
<td>{network.product}</td>
<td>{network.domain_Name}</td>
<td>{network.publisher_Id}</td>
<td>{network.relationship}</td>
<td>{network.certification_Id}</td>
<td>{network.lastUpdate}</td>
<td className="actionCoulmn">
</td>
</tr>
</tbody>
</Table>
And I need to add this div as a part of the table:
I was trying to add some divs and styles to the <tr> and <th> with no success.
Does someone have any idea how to deal with it?
You could settle with this:
<div id="parent">
<div /> // your div here
<table /> // your existing table component
</div>
and use styling to merge them
Related
Firstly, here is my UI:
My output to my right displayed as a result of using the tag <tbody> inside my ajax:
success: function (response){
var tbody="";
$.each(response.all_categories, function (key, cat) {
tbody+=`
<tr>
<td class="p-0 btn-category-list-col">
<button id="submit" type="submit" class="btn float-left" data-toggle="modal" data-target="#createCategory">${cat.category_name}</button>
</td>
</tr>`; });
$('tbody').html(tbody) }
My problem is that I am using two <tbody> in this same page, so the table to the right shows up in the left:
Is there some way to make my ajax function read a class or an id instead of the tag itself?:
So kind of like my line tbody+= becomes: tbody(class/id)+=
Here is my table that uses two tbody tags:
<div class="col-md-2 border">
<table id="categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
any help would be appreciated thanks
If you didn't use the same IDs for both tables(which is invalid html by the way) you could have used the table id to select the correct one.
From the html above you could use the table class to identify it
$('table.table-striped tbody').html(tbody);
or you could fix the invalid duplicate ids and use the id to select the correct table
<div class="col-md-2 border">
<table id="side-categoryList" class="table">
<thead>
<tr>
<th class="thead-category-list">Category List</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<div class="col-md-10 border bbr-table-col">
<div id="success_message"></div>
<table id="main-categoryList" class="table table-striped table-bordered responsive no-wrap" cellspacing="0" width="100%">
<thead>
<tr class="bbr-table text-light">
<th>Group Name</th>
<th>Group Type</th>
<th>Group Users</th>
<th>Status</th>
<th>Active</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
$('#main-categoryList tbody').html(tbody);
Why bootstrap responsive table is not working with dir-paginate.
I have created a responsive grid HTML table by using bootstrap which is working with hard-coded data, but when my angular developer colleague used some 'dir-paginate' for retrieving data from the database then my responsive design code is not working when minimizing the browser shorter.
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<tr>
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I think you are using the directive at the wrong Position. You want to repeat the <tr>-element instead of the <tbody>-element.
For more Information look at this answer: https://stackoverflow.com/a/34392061/7225524
<div class="portlet-body flip-scroll">
<div style="overflow-x:auto;">
<table id="Tbl_SiteVisitViewAll" class="table table-bordered table-striped table-condensed flip-content">
<thead class="flip-content">
<tr>
<th>S. No.</th>
<th ng-click="Sort('Active')">Attended By</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="S in SiteVisits |filter : FollowUp |orderBy:'key':AscOrDesc | itemsPerPage:20">
<td>{{S.index}}</td>
<td>{{S.UpdatedBy}}</td>
<td>
<a href="#" ">
Edit
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a table inside table in html as follows:
<table class="sortable draggable">
<thead>
<tr>
<th class="col-salesOrderId">Order Number</th>
<th class="col-orderDate">Date of Order</th>
<th class="col-party">Party</th>
<th class="col-edit">Edit</th>
<th class="col-delete">Delete</th>
</tr>
</thead>
<tbody>
{#orders}
<tr>
<td class="col-salesOrderId">{.salesOrderId}</td>
<td class="col-orderDate">{#formatDate date=orderDate format="DD-MM-YYYY" /}</td>
<td class="col-party">{.party.partyName}</td>
<td class="col-edit">
<button class="btn btn-info btn-edit">
</button>
</td>
<td class="col-delete">
<button class="btn btn-danger btn-delete">
</button>
</td>
</tr>
<tr>
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<th class="col-rate">Rate</th>
<th class="col-amount">Amount</th>
</tr>
</thead>
<tbody>
{#items}
<tr>
<td>{.item.itemName}</td>
<td>{.quantity}</td>
<td>{.rate}</td>
<td>{.quantity * .rate}</td>
</tr>
{/items}
</tbody>
</table>
</tr>
{/orders}
</tbody>
</table>
I get the output as shown below:
Why I get such an output? I expected to see nested tables.
Your HTML has several errors, starting with this:
{#orders}
As others have mentioned, this is also bad:
<tr>↩ <table class="sortable draggable row-details"
Do yourself a big favor and start using an HTML validator like W3C's. It will find problems like this quickly. (It will also find other things to complain about that you might not need to fix, but when it helps, it will save a lot of time.)
Also, start using the Chrome inspector to see what it's done when your markup goes haywire. In this case, you can see that Chrome closed your first table, instead of nesting it. When Chrome messes with your HTML like this, it's a sign you might have an error in that spot.
</tr></tbody></table>
{#items}
{/items}
<table class="sortable draggable row-details">
<thead>
<tr>
<th class="col-itemName">Item Name</th>
<th class="col-quantity">Quantity</th>
<table>
<tr>
<td> <!-- must be in td -->
<table> <!-- nested table -->
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
</table>
your nested table need to be inside of td or th.
You need to nest the child <table> tag inside a <td> tag, not inside a <tr> tag. Doing this should make it display properly, as only a <td> or <th> tag can go directly inside a <tr> tag.
The <table> tag needs to be inside <td> or <th> tag for it to be nested. In your code, you have put the <table> tag as a child of <tr> tag which is wrong. It should be child of <td> or <th>.
Inserting <td> or <th> between <tr> and <table> will give the output correctly.
Here is working link for reference:
Nested Tables in HTML
Example:
<table border="1">
<thead>
<tr>
<th>Item 1
<th>Item 2
</tr>
</thead>
<tbody>
<tr>
<td>
<table border="1">
<tr>
<td>1
<td>2
</tr>
<tr>
<td>1
<td>2
</tr>
</table>
<td>A
</tr>
</tbody>
</table>
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
I am not really sure if there is a way to do this, and as of now I am thinking I will just make a separate element with absolute positioning and place it in the proper position.
This is what I would like to do with the table... Is it even possible? Right now I have the table that you can see part of to the right, but I was just trying to think of a way to do this.
I have a normal table layout as of now: But take a look at the fiddle: http://jsfiddle.net/W3Tvm/
I guess the main challenge will be trying to keep the border-radius
<table class="overviewTable">
<thead>
<tr>
<th colspan="5">
FAN FREE TERMINALS</th>
</tr>
</thead>
<thead class="posiOverviewPN">
<tr>
<th class="txHeader">
TX4200E</th>
<th class="ksHeader">
KS6700</th>
<th class="ksHeader">
KS7200</th>
<th class="ksHeader">
KS7500</th>
<th class="ksHeader">
KS7700</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img height="68px" src="../posiflex/images/tx-4200.png" width="120px"></td>
<td>
<img height="108px" src="../posiflex/images/ks6700.png" width="120px"></td>
<td>
<img height="109px" src="../posiflex/images/ks7200.png" width="120px"></td>
<td>
<img height="117px" src="../posiflex/images/ks7500.png" width="120px"></td>
<td>
<img height="119px" src="../posiflex/images/ks7700.png" width="120px"></td>
</tr>
</tbody>
</table>
I believe what you are wanting to do is basic table structuring: http://jsfiddle.net/9VULt/
All you need to do is have empty th/td cells:
<table>
<thead>
<tr>
<th><!--empty--></th>
<th>TX42</th>
</tr>
<tr>
<th><!--empty--></th>
<th>image</th>
</tr>
</thead>
<tbody>
<tr>
<td>Advantage</td>
<td>Industrial grade...</td>
</tr>
</tbody>
</table>