I have a Bootstrap responsive table in my AspNet Web API project which not showing me foot text within the table. My foot text shows on the top of the page outside table. I mean I'm trying to keep the footer of bootstrap modal to bottom but I can't, this is my html structure:
<div class="container">
<div class="table-responsive">
<table class="table table-bordered table-hover" id="Countries">
<thead>
<tr>
<th>
CountryId
</th>
<th>
CountryName
</th>
<th class="col-md-2">
Action
</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
<tfoot> All text I put here shows at the top of the page outside of the table</tfoot>
</table>
</div>
</div>
This is very simple because you didn't have defined any row in footer that's why. And also remember to use table-responsive class with table only rather then with div.
Look below code.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<div class="container">
<table class="table table-responsive table-bordered table-hover" id="Countries">
<thead>
<tr>
<th>
CountryId
</th>
<th>
CountryName
</th>
<th>
Action
</th>
</tr>
</thead>
<tbody class="tbody"></tbody>
<tfoot>
<tr>
<td colspan="3">All text you were puting here was shown at the top of the page outside of the table but now it is not.</td>
</tr>
</tfoot>
</table>
</div>
Related
How to fit table on mobile view?
I want:
But it is as:
My codes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2>Text:</h2>
<table class="table table-bordered table-dark">
<tbody>
<tr>
<td>Name</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text text text text text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</tbody>
</table>
SelectGo Ahead
</div>
How to fit table on mobile view?
The result for the above codes is not readable properly, we have to zoom it!
You can change from <div class="container"> to <div class="container-fluid">
And add meta viewport for your page.
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Here is result with container-fluid
If you don't want to use container-fluid, you can setup in media query max width 767px, remove max-width values and set margin to 0 for container class
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-6">Item 1.0</div>
<div class="col-lg-6">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-6">Item 2.0</div>
<div class="col-lg-6">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
This code creates a table where all items are in the same line. I have searched the css file but there is nowhere defined inline or inline-block, so I guess this is normal bootstrap behavior. What I am trying to achieve is to show items with prefix 1 one after another and same for items with prefix 2, but I want them all in same row. I have tried using <ul> with <li> elements, but they are also showed in the same line for some reason.
My table should contain only two columns and one header above them all. This is what I get now:
Issue is due to column classes - col-lg-6 which makes divs use equal width of parent td, use class col-lg-12 to use complete td width, please check the css of these classes below
.col-lg-12 {
width: 100%;
}
.col-lg-12 {
width: 50%;
}
Run below code
favorite
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table">
<thead>
Head
</thead>
<tbody>
<tr>
<td>
<div class="row">
<div class="col-lg-12">Item 1.0</div>
<div class="col-lg-12">Item 1.1</div>
</div>
</td>
<td>
<div class="row">
<div class="col-lg-12">Item 2.0</div>
<div class="col-lg-12">Item 2.1</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
codepen for reference - https://codepen.io/nagasai/pen/xybpMm
I don't understand yet why you need to use bootstrap grid system inside the table when the td's are designed to work like that. You're also using col-lg-6 which is equivalent to 2 td's inside 1 tr since there is no collapse (lg).
You'll have a similar output if you use this code;
<h6>Default:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='2'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
</tr>
<tr>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
<br>
<h6>Two Columns Only:</h6>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th colspan='4'>
Head
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
Item 1.0
</td>
<td>
Item 1.1
</td>
<td>
Item 2.0
</td>
<td>
Item 2.1
</td>
</tr>
</tbody>
</table>
</div>
I would like to get the header of my table fixed, so it could be always visible while scrolling down. The height of my table would be fixed to 500 px.
Here is a plunkr:
enter link description here
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Produit</th>
<th style="text-align:center">Emballage</th>
<th style="text-align:center">Certificat Fourn.</th>
<th style="text-align:center">Marque</th>
<th style="text-align:center">Catégorie</th>
<th style="text-align:center">Calibre</th>
<th style="text-align:center" colspan="3">20/03</th>
<th style="text-align:center" colspan="3">21/03</th>
<th style="text-align:center" colspan="3">22/03</th>
<th style="text-align:center" colspan="3">23/03</th>
</tr>
<tr>
<th colspan="6"></th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="planning in data">
<td style="text-align:center">
{{planning.produit}}
</td>
<td style="text-align:center">
{{planning.emballage}}
</td>
<td style="text-align:center">
{{planning.certificatFournisseur}}
</td>
...
<td style="text-align:center">
{{planning.dispJ4}}
</td>
</tr>
</tbody>
</table>
I have looked over the net, but I didn"t find any nice solution.
Thanks for you help.
You have to split your table to one with headers and a second one with data. Then add javascript that on scroll (detect if the position of your header table are near the 0 of screen and if yes then add css style for your header table -> position:fixed top:0px ;
you will also have a reverse javascript for removing position: fixed when viewer scroll up.
EDIT
If you dont care to lose table from page you can juse use 2 tables (header and content) put content's table's height = 500px - header's table's height and for content's table css overflow:scroll
I have found a solution that works pretty well on one of my tables.
I have tried to apply it to another table but I am getting differences between td width and th width. I don't know why, even if I set the same width to each one of them.
If anyone can explain to me the reason why...
Thanks!
Plunkr :
http://plnkr.co/edit/kDxIYzmO6onqqZcZIURc?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<table class="table table-bordered table-hover" style="font-size:11px;table-layout: fixed; margin-bottom:0px">
<thead>
<tr>
<th style="text-align:center;width:168px">Fournisseur</th>
<th style="text-align:center;width:148px">Désignation</th>
<th style="text-align:center;width:81px">Date</th>
<th style="text-align:center;width:53px">Colis</th>
<th style="text-align:center;width:53px">Brut</th>
<th style="text-align:center;width:53px">Tare</th>
<th style="text-align:center;width:78px">Poids net</th>
<th style="text-align:center;width:58px">Pièces</th>
<th style="text-align:center;width:68px">Palette</th>
<th style="text-align:center;width:53px">Valo</th>
<th style="text-align:center;width:98px">Prix unit ht</th>
<th style="text-align:center;width:58px">H.T.</th>
<th style="text-align:center;width:58px">Tva</th>
</tr>
</thead>
</table>
<div class="wrap_scrollable">
<div class="scrollable">
<table class="table table-bordered" style="font-size:11px;table-layout: fixed">
<tbody>
<!-- ngRepeat: frais in listeFrais -->
<tr >
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALIMEA</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-50</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
<tr>
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALBA BIO COOP</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:98px;word-wrap: break-word" class="ng-binding">2</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-20</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
I'm trying to make a table that has rows that could expand and collapse on the press of a button, like in Windows Explorer, pressing the "plus" next to the folder will open the files in the directory.
Here's what I wrote:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../asset/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="../asset/css/trax.css" type="text/css" />
</head>
<body>
<div class="container">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Test Results</h3>
</div>
<div class="table-responsive">
<table class="table table-condensed table-hover">
<thead>
<tr>
<th class="col-md-7 text-left">Name</th>
<th class="col-md-1 text-right">Success</th>
<th class="col-md-1 text-right">Total</th>
<th class="col-md-1 text-right">Fail</th>
<th class="col-md-2 text-center">Trend</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">
<button type="button" class="btn btn-default btn- xs" data-toggle="collapse" data-target=".module,.first">
+
</button>
Foo
</td>
<td class="text-right up"><span class="glyphicon glyphicon-arrow-up"></span>80%</td>
<td class="text-right">5</td>
<td class="text-right">1</td>
<td class="text-center"><span class="inlinesparkline" values="1,2,8,4,5,7,10"></span></td>
</tr>
<tr class="collapse out module first">
<td class="text-left col-md-7">Hi</td>
<td class="text-right up col-md-1"><span class="glyphicon glyphicon-arrow-up"></span>95%</td>
<td class="text-right col-md-1">5</td>
<td class="text-right col-md-1">1</td>
<td class="text-center col-md-2"><span class="inlinesparkline" values="1,2,3,4,5"></span></td>
</tr>
<tr>
<td class="text-left">Bar</td>
<td class="text-right down"><span class="glyphicon glyphicon-arrow-down"></span>60%</td>
<td class="text-right">5</td>
<td class="text-right">2</td>
<td class="text-center"><span class="inlinesparkline" values="10,5,7,12,6,4,2"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="../asset/js/jquery-2.1.1.min.js" type="text/javascript"> </script>
<script src="../asset/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../asset/js/jquery.sparkline.js" type="text/javascript"> </script>
<script src="../asset/js/app.js" type="text/javascript"></script>
</body>
</html>
So, I managed to get the button to show a new row but it isn't arranged properly: the table cells don't arrange according to the table header cells like in other rows.
But when the button is pressed, during the transition, it arranges itself right before adjusting back to the wrong spacing.
Adding col-md-(number) to the cells as classes doesn't fix it.
Please tell me how to fix it / where I am going wrong.
That is a funny one. I found a similar question with an answer that appears to work. I created a jsFiddle that shows it working. Basically it involves adding your own CSS class that overrides the bootstrap CSS and forces it to display as a table row.
table .collapse.in {
display: table-row !important;
}
I can't say I particularly like the solution, especially the use of !important, but it works. There is anohter solution in the question I linked you to which involved adding a <div> to the <tr> with a class of collapsible but I disliked the sound of that even more.
I'm trying to add jquery data tables to a simple aspx page. Did this before a couple times but this website that I'm adding it to now has some CSS that is getting inherited.
So I took the generated HTML and removed the CSS that was getting added to it.
My page still does not style properly!
Here is my HTML.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
</head>
<body>
<div>
<script type="text/javascript" src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.custom.min.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.min.js"></script>
<link href="CSS/jquery-ui-1.10.3.custom.css" rel="stylesheet" />
<link href="CSS/demo_page.css" rel="stylesheet" />
<link href="CSS/demo_table.css" rel="stylesheet" />
<link href="CSS/demo_table_jui.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables.css" rel="stylesheet" />
<link href="CSS/jquery.dataTables_themeroller.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$("#gvMain").prepend($("<thead></thead>").append($(this).find("tr:first"))).
dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers"
});
});
</script>
<div>
<form>
<table id="gvMain">
<tr>
<th scope="col">Some Id</th>
</tr>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</table>
</div>
</form>
</div>
</body>
</html>
It looks like below
I have spent hours trying to get it to work but no luck. It is in the main directory of the existing site though. But that should not matter right coz the HTML does not have anything included in it.
This is the screenshot of four errors that are showing in the above screenshot. It is nothing but some missing images/css files.
You have to add the <thead> and <tbody> tag
Here is example of table:
<table id="gvMain">
<thead>
<tr>
<th scope="col">Some Id</th>
</tr>
</thead>
<tbody>
<tr class="gridItem">
<td>297</td>
</tr>
<tr class="gridAlternatingItem">
<td>296</td>
</tr>
<tr class="gridItem">
<td>295</td>
</tr>
<tr class="gridAlternatingItem">
<td>295</td>
</tr>
<tr class="gridItem">
<td>294</td>
</tr>
<tr class="gridAlternatingItem">
<td>294</td>
</tr>
<tr class="gridItem">
<td>293</td>
</tr>
<tr class="gridAlternatingItem">
<td>293</td>
</tr>
</tbody>
</table>