infdig Infinite $digest Loop in table - javascript

I am implementing a table with CSS which is changed in each row but one td of table contains another table. I have implemented it like this :
HTML code :
<table width="100%" class="table">
<thead>
<tr>
<th style="width: 11%">Location</th>
<th><div>
<table class="table" style="table-layout: fixed;width: 100%; margin-bottom: 0px;">
<tr>
<th style="width: 12%">Col1</th>
<th style="width: 12%">Col2</th>
<th style="width: 12%">Col3</th>
<th style="width: 11%">Col4</th>
</tr>
</table>
</div>
</th>
</tr>
</thead>
<tbody style="overflow-y: auto; max-height: 200px;">
<tr data-ng-repeat="Loc in LocationList">
<td style="width: 11%;">{{Loc.locationName}}</td>
<td><div>
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class="(checkEvenOrOdd()) ? 'odd' : 'even'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class="(!evenOrOdd) ? 'odd' : 'even'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
JS code:
$scope.evenOrOdd = true;
$scope.checkEvenOrOdd = function()
{
if($scope.evenOrOdd==true)
{
$scope.evenOrOdd=false;
return !$scope.evenOrOdd;
}
else
{
$scope.evenOrOdd=true;
return !$scope.evenOrOdd;
}
};
This code gives me correct output but after clicking one any link on the page it gives me this error
Watchers fired in the last 5 iterations: [["(checkEvenOrOdd()) ? 'odd' : 'even';
I searched for this error and tried some code changes but not able to solve it. Please note it is not just to check even or odd row. There is some ordering in rows. Kindly help.


I would instead use ng-class-even/ng-class-odd https://docs.angularjs.org/api/ng/directive/ngClassEven:
<table class="table" style="table-layout: fixed;width: 100%;margin-bottom: 0px;"">
<tr data-ng-repeat="a in Loc.locations">
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.subLocName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">{{a.typeName}}</td>
<td data-ng-class-even="'even'" data-ng-class-odd="'odd'" style="width: 12%;">
<span style="color: red;" data-ng-show="{{a.unassigned}}">{{a.prfName}}</span>
<span data-ng-show="!{{a.unassigned}}">{{a.prfName}}</span>
</td>
</tr>
</table>
Or alternatively it can be done using css but this won't work in IE8:
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

Related

Why is my variable tabledata returning undefined?

What I am trying to do in my code is to return a row of my table when it is clicked. I am doing this in the jquery function $("tr.table").click(function)..... After that I am trying to store the data of this table row in a variable named tableData. This all works fine but when i try to use the variable tabledata in an if statement. I get an tabledata is undefined error. My question is how can I use the variable tabledata in my if statement without getting an error.
my javascript code
function onUpdate() {
var tableData
var auth2 = gapi.auth2.getAuthInstance();
var profile = auth2.currentUser.get().getBasicProfile();
$("tr.table").click(function () {
tableData = $(this).children("td").map(function () {
return $(this).text();
}).get();
});
if( tableData[7] === 2) {
console.log("if statement");
...
}
else {
console.log("else statement");
$.confirm({
title: '',
content: '',
buttons: {
confirm: function () {
}
}
});
}
}
my html table code
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table command">
<a onclick="onUpdate()" style="color: #007bff; cursor: pointer"> <i class="fa fa-pencil-square-o" aria-hidden="true"></i></a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> <i class="fa fa-trash" aria-hidden="true"></i></a>
</td>
</tr>
</tbody>
</table>

You don't need to assign click event within onUpdate function. If I understood right, you want to click on update button and execute if..else block. You can pass a reference of a element like onclick="onUpdate(this)" in HTML. Then use .closest() to find the tr and get entire row as an array. One thing to keep in mide here is in if using === for comparison may not work as array will contain string value even for numbers. So either do type conversion or just use == to compare only values as done here.
function onUpdate($this) {
var tableData;
tableData = $($this).closest('tr').children("td").map(function() {
return $(this).text();
}).get();
//console.log(tableData);
if (tableData[7] == 2) {
console.log("if statement 2");
} else if (tableData[7] == 22) {
console.log("if statement 22");
} else {
console.log("else statement");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 2</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">2</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 22</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">22</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">value 33</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">1</td>
<td class="table" style="display: none">3</td>
<td class="table" style="display: none">33</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete()" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
</tbody>
</table>

Pass the this reference to the in-line function:
<a onclick="onUpdate(this)" />
Then use the anchor reference i.e. ref in the handler to get the row:
function onUpdate(ref) {
const $row = $(ref).closest('tr');
}
Full example
function onUpdate(ref) {
const $row = $(ref).closest('tr'),
rowData = $row.find('td:not(.actions)').map(function(td) {
return $(this).text();
}).get();
console.log(`Row data: ${JSON.stringify(rowData)}`);
if (rowData[0] === '2020-12-23') {
console.log('Hello World!');
}
}
function onDelete(ref) {
$(ref).closest('tr').remove();
}
thead tr th {
text-align: center;
}
.actions {
display: grid;
grid-auto-flow: column;
column-gap: 1em;
justify-content: center;
align-content: space-evenly;
}
.hidden {
display: none;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time Slot</th>
<th>Room</th>
<th>Attendees</th>
<th class="hidden">Hidden #1</th>
<th class="hidden">Hidden #2</th>
<th class="hidden">Hidden #3</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>2020-12-23</td>
<td>12:00</td>
<td>42</td>
<td>8</td>
<td class="hidden">...</td>
<td class="hidden">...</td>
<td class="hidden">...</td>
<td class="actions">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer">
<i class="fas fa-pencil-alt" aria-hidden="true"></i>
</a>
<a onclick="onDelete(this)" style="color: #007bff; cursor: pointer">
<i class="fas fa-trash" aria-hidden="true"></i>
</a>
</td>
</tr>
</tbody>
</table>

this referes to the object the onclick method belongs to. I changed your HTML code with onclick="onUpdate(this)", now you can fecth the texts of the row with map() function.
Also you need to change your selector to select <td> of the clicked <tr> so I used [parent().parent()][1] method to reach that. You can use alternative selectors like [closest()][1]
var tableData;
function onUpdate(e) {
tableData = $(e).parent().parent().children("td").map(function () {
return $(this).text();
}).get();
console.log("Table data has created as; "+tableData);
if( tableData[7] === 2) {
console.log("if statement");
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered table-responsive-sm table-hover">
<thead>
<tr>
<th>Date</th>
<th>TimeSlot</th>
<th>Room</th>
<th>Attendees</th>
<th>update</th>
<th>delete</th>
</tr>
</thead>
<tbody>
<tr class="table">
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table" style="display: none">...</td>
<td class="table command">
<a onclick="onUpdate(this)" style="color: #007bff; cursor: pointer"> update</a>
</td>
<td class="table command">
<a onclick="onDelete(this)" style="color: #007bff; cursor: pointer"> delete</a>
</td>
</tr>
</tbody>
</table>

You do not need that click function so you can modify your code in this way.
<script>
function onUpdate() {
var tableData = $("tr.table")
.children("td")
.map(function () {
return $(this).text();
})
.get();
if( tableData[7] === 2) {
console.log("if statement");
}
}
</script>

Keep a table header at top of grid when scrolling

I know there are multiple way to write this, I have tried (fixed) and since I am not familiar with front end code I am finding this challenging. I found that placing the table header in a table itself and the table body in a table scrollable -y worked but I also need to have columns line up based on a drop down selection from the user and if I could avoid having to do that it would improve the look but I have yet to find a fix.
</div>
<div v-if="globals.showStructure === true" style="border:1px solid red; max-height:500px;overflow-y:scroll;position:top;" id="tableContainer2">
<!--<div v-if="globals.showStructure === true" style="max-height:500px;overflow-y:auto" id="tableContainer2">-->
<table class="table table-bordered">
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewActiveStructMenu === true" ref="activeStructure">
<li v-on:click="deleteStructure()">Delete</li>
<li v-on:click="pendStructure()">Pend</li>
</ul>
<ul class="right-click-menu" tabindex="-1" v-if="globals.viewPendStructMenu === true" ref="pendStructure">
<li v-on:click="deleteStructure()">Delete<li>
<li v-on:click="activateStructure()">Activate</li>
</ul>
<thead>
<tr>
<th style="width: 36px;" v-if="globals.showActiveToPendCheckbox == true" >Pend </th>
<th style="width: 38px;" v-if="globals.showActivateCheckbox == true" > Activate </th>
<th style="width: 58px;" v-if="globals.showDeleteCheckbox == true" > Delete </th>
<th style="width: 48px;" data-toggle="tooltip" title="Super Summary Code">Sup Sum Code</th>
<th style="width: 80px;" data-toggle="tooltip" title="Super Summary Description"> Sup Sum Code Desc</th>
<th style="width: 48px;" data-toggle="tooltip" title="Summary Code">Sum Code</th>
<th style="width: 122px;" data-toggle="tooltip" title="Summary Code Description">Sum Code Desc</th>
<th style="width: 115px;" data-toggle="tooltip" title="Family Code">Fam Code</th>
<th style="width: 81px;" data-toggle="tooltip" title="Secondary Code">Sec Code</th>
<th style="width: 180px;" data-toggle="tooltip" title="Trade Item Description">GTIN Desc</th>
<th style="width: 82px;" data-toggle="tooltip" title="GTIN">GTIN</th>
<th style="width: 40px;" data-toggle="tooltip" title="Status">Status</th>
<th v-if="globals.showEditColumn == true" style="width: 50px;" title='Edit'>Edit</th>
</tr>
</thead>
<tbody>
<tr v-on:mousedown="rowStructClick(fcStructureItem.gtin,false)" v-for="(fcStructureItem, index) in filteredFamilyCodeStructure"
:key="fcStructureItem.gtin"
:id="fcStructureItem.gtin"
:form.fcStructure="form.fcStructure" tabindex="-1" v-on:contextmenu="openStructMenu($event)"
:class = "alterRowColors(index)">
<td v-if="globals.showActiveToPendCheckbox == true">
<input type="checkbox" v-model="activeToPendSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td v-if="globals.showActivateCheckbox == true">
<input type="checkbox" v-model="activateSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td v-if="globals.showDeleteCheckbox == true">
<input type="checkbox" v-model="deleteSelected" :value="fcStructureItem.gtin" number>
</input>
</td>
<td>
<span >{{ fcStructureItem.superSummaryCd }}</span>
</td>
<td>
<span >{{ fcStructureItem.superSummaryDesc }}</span>
</td>
<td>
<span >{{ fcStructureItem.summaryCd }}</span>
</td>
<td>
<span >{{ fcStructureItem.summaryDesc }}</span>
</td>
<td>
<span>{{ fcStructureItem.couponFamilyCode }}</span>
</td>
<td>
<span>{{ fcStructureItem.oldCouponFamilyCode }}</span>
</td>
<td>
<span >{{ fcStructureItem.tradeItemDescription }}</span>
</td>
<td>
<span >{{ fcStructureItem.gtin }}</span>
</td>
<td>
<span >{{ fcStructureItem.status }}</span>
</td>
<div v-if="globals.showEditButton == true" >
<td>
<span>
<button class="btn btn-primary" title="edit structure item" v-on:click="editStructure(fcStructureItem)">
<span> Edit </span>
</button>
</span>
</td>
</div>
</tr>
</tbody>
</table>
</div>
<table id="PlaceHolder2" class="table table-bordered"></table>
<!-- new grid code is between here>-->
</div>
Help on entering the CSS in here would be great if needed.

you can use the new position: sticky property.
When the page would scroll over the table header, it sticks to the top of the page and stays there.
For this, you have to define a top value, that specifies the offset (probably 0)
But be careful, sticky does not work in every browser and is especially buggy in tables: https://caniuse.com/#feat=css-sticky
thead {
/* position: sticky; and top: 0; are the only needed properties here. The rest is for showcase only. */
position: sticky;
top: 0;
background: red;
}
th {
width: 300px;
height: 50px;
}
td {
border: 1px solid yellow;
height: 200px
}
<table>
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
</tbody>
</table>

I've solved this previously having a fixed table layout CSS (or only 1 column is allowed to grow for width), and you do a pair of tables. one only has headers, the other only has rows and is inside a scrollable DIV. This was admittedly ~10years ago and IE6 compatible...
These days you should be able to set a CSS for your <tbody> to have overflow-x:none and overflow-y:scroll (or auto if you want no scrollbar with short data lists) as long as your <tr> are inside your <tbody>
(Edited to add code tag formatting to stop html tags vanishing from the text!)

Making an absolute div same top position with another div using jQuery

I need some CSS/jQuery gurus here.
Basically, there are 2 parent divs sitting side by side. First parent div contain a picture and below it contain a table.
Second parent div contain only a table with the style position: absolute;.
Now the thing is, the picture is different in height, so that means the position of the table below it gonna change.
Thus, how can I made the table on the 2nd div align the same with the first table, without changing the HTML structure. Is it possible doing it with jQuery, like grabbing the 1st table position, and apply it to the 2nd table?
Basically here's the structure is:
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
}
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>

You could use jquery for this, yes. Something like:
var test = $( ".shop_attributes1" );
var position = test.position();
$('.second-table').css('top', position.top);
Here is a jsfiddle of this: https://jsfiddle.net/7wvjra83/1/
Basically you take the position of the first table and set the css for the second one to be aligned. Hope this works for you

I am not too sure if it is what you are looking for, however I hope it could helps:
$('.second-table').css('left', 361);
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
----------
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>

How to remove text overlapping in table?

The responsive table with a border has been designed. The problem is wraptexting, even when included th.nowrap in css, where data is overlapping and two horizontal lines appear when I look into the mobile view.
I had declared nowrap text in css and even td and th but its not working.
How can I solve this wraptext error?
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span>
<font color="blue">Se</font>
</span>
</div>
<thead>
<tr>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Enq</font>
</th>
<th style="width:7.8%;white-space:nowrap;" nowrap="nowrap">
<font color="grey">Da</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Bu</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">Prop</font>
</th>
<th style="width:17.9%;white-space:nowrap;">
<font color="grey">Pr</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">District</font>
</th>
<th style="width:9.9%;white-space:nowrap;">
<font color="grey">City</font>
</th>
<th style="width:9.8%;white-space:nowrap;">
<font color="grey">Bedrooms</font>
</th>
<th style="width:7.9%;white-space:nowrap;">
<font color="grey">Details</font>
</th>
<th style="width:7.8%;white-space:nowrap;">
<font color="grey">Update</font>
</th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"><a>Det </a></td>
<td style="width:8%;white-space:nowrap;"><a> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
table {
width: 100%;
white-space: nowrap;
}
thead, tbody, tr, td, th {
display: block;
}
tr:after {
content: ' ';
display: block;
visibility: hidden;
clear: both;
white-space: nowrap;
}
thead th {
height: 40px;
white-space: nowrap;
/*text-align: left;*/
}
tbody {
height: 40px;
overflow-y: auto;
white-space: nowrap;
}
thead {
/* fallback */
}
tbody td, thead th {
width: 19.2%;
float: left;
white-space: nowrap;
}

I think this is what you wanted. I removed all the nowrap code, as you didn't need it to achieve the responsive layout.
The key here is to give the tables parent element position:relative;, float:left; and a width width:100%; so the table's width:100%; has a meaning. (100% of what?).
You also don't need to give every column a width. It's enough to provide widths for one row and the rest of the table will use those rules.
There was a <div> inside the table which I removed to above the table.
Here is the code: (run the snippet)
Note: the borders on the th are there just to show the width of each. I also changed the width of the widest column from 18% to 14% and gave the 4% to the last two columns (2% each).
.table-responsive
{
position:relative;
float:left;
width:100%;
}
table
{
width: 100%;
}
th
{
color:grey;
border:1px solid #000;
}
td
{
text-align:right;
}
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<table class="table table-bordered mbn">
<tr>
<th style="width:8%;">Enq</th>
<th style="width:8%;">Da</th>
<th style="width:10%;">Bu</th>
<th style="width:10%;">Prop</th>
<th style="width:14%;">Pr</th>
<th style="width:10%;">District</th>
<th style="width:10%;">City</th>
<th style="width:10%;">Bedrooms</th>
<th style="width:10%;">Details</th>
<th style="width:10%;">Update</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Det</td>
<td>ed</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Please Use this code
<div class="panel panel-default">
<div class="panel-heading">Panel heading</div>
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Test</td>
<td>Test</td>
<td>Test</td>
</tr>
</tbody>
</table>
</div>

Please use below code
<div class="row">
<div class="panel panel-default">
<!-- /.panel-heading -->
<div class="panel-body pn">
<div style="overflow-x:auto;">
<br>
<div class="table-responsive">
<table class="table table-bordered mbn">
<div class="panel-heading">
<span class="panel-title">
<span class="fa fa-table"></span><font color="blue">Se</font></span>
</div>
<thead>
<tr>
<th style="width:8%;white-space:nowrap;"><font color="grey">Enq</font></th>
<th style="width:8%;white-space:nowrap;" nowrap="nowrap"><font color="grey">Da</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bu</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Prop</font></th>
<th style="width:18%;white-space:nowrap;"><font color="grey">Pr</font></th>
<th style="width:10%;white-space:nowrap;""><font color="grey">District</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">City</font></th>
<th style="width:10%;white-space:nowrap;"><font color="grey">Bedrooms</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey" >Details</font></th>
<th style="width:8%;white-space:nowrap;"><font color="grey">Update</font></th>
</tr>
</thead>
<tr>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:18%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:10%;white-space:nowrap;"></td>
<td style="width:8%;white-space:nowrap;">Det </a></td>
<td style="width:8%;white-space:nowrap;"> ed </a></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>

Convert table to div with CSS without tbody

I want to convert a table to div tables, but when I created the table in Dreamweaver it just added the <tbody> tag. Does I need it when converting the table to div-table ?
Here is the code of the table
<table width="100%" border="0" align="left" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</tbody>
</table>
As you can see I want a table using divs with
width="100%" border="0" align="left" cellpadding="0" cellspacing="0"
What is the correct way to do that? And is neccesary to set another div for the <tbody> tag ?

HTML
<div class="table">
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
<div class="tr">
<div class="td"></div>
<div class="td"></div>
</div>
</div>
CSS
.table {
width: 100%;
display: table;
border-collapse: collapse;
}
.table .tr {
display: table-row;
}
.table .td {
display: table-cell;
vertical-align: middle;
text-align: left;
}
Hope this works for you. :)

Categories