I am attempting to style a table within a dropdown button.
<div class="col-sm-6 col-md-6 col-lg-6">
<button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-parent=".accordion" data-target="#demo2" aria-expanded="true">Supported Tenders</button>
<div id="demo2" class="out collapse in" aria-expanded="true">
<br>
<table table-hover="">
<tr>
<td>Account Type URI: Account</td>
</tr>
<tr>
<td>Network Type URI: Network</td>
</tr>
<tr>
<td>Onboarding Tender: Discover</td>
</tr>
<tr>
<td>Onboarding Gateway: MCX</td>
</tr>
<tr>
<td>Attribute Name: New</td> <tr>
</tr><td>Attribute Value: Tender</td>
</tr>
</table>
</div>
</div>
Essentially,
1. I am wondering how I can move "Attribute Name" and "Attribute Value" to the next column.
Is there any way to create a panel or something that shrinks/collapses the table?
Any assistance will be appreciated. Thank you!
try this
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>table collapsed in this button click for view the table</h3>
<button type="button" class="btn btn-secondary btn-block" data-toggle="collapse" data-target="#demo">Supported Tenders</button>
<div id="demo" class="collapse">
<table table-hover="">
<tr>
<td>Account Type URI: Account</td>
</tr>
<tr>
<td>Network Type URI: Network</td>
</tr>
<tr>
<td>Onboarding Tender: Discover</td>
</tr>
<tr>
<td>Onboarding Gateway: MCX</td>
</tr>
<tr>
<td>Attribute Name: New</td>
<td>Attribute Value: Tender</td>
</tr>
</table>
</div>
</div>
</body>
</html>
Related
Hello I have tried to make a table that has expenses, amount kai action but I have a problem with the alignment. I tried to correct it through the width but unfortunately it did not work.
What am I doing wrong?
<head>
<meta charset="ISO-8859-1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
</head>
<body>
<a routerLink="/addexpense">Add Expense</a>
<div class="div1">
<label for="keyword">Search:</label>
<input type="text"
id="keyword"
[(ngModel)]="filters.keyword"
name="keyword"
(input)="listExpenses()">
</div>
<div class = "container">
<table class = "table table-striped table-bordered" >
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<div *ngFor ="let expense of expenses">
<tr>
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink ="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</div>
</table>
</div>
</body>
result :
Not to bind *ngFor to <div> element.
Instead, you need to bind *ngFor to <tr> element and remove <div> element from the <table>.
<table class="table table-striped table-bordered">
<tr>
<th>Expense</th>
<th>Amount</th>
<th>Actions</th>
</tr>
<tr *ngFor="let expense of expenses">
<td>{{expense.expense}}</td>
<td>{{expense.amount | currency: '€'}}</td>
<td> <a routerLink="/editexpense/{{expense.id}}">Edit</a>
<button *ngIf="expense.id" (click)="deleteExpense(expense.id!)">Delete</button>
</td>
</tr>
</table>
Sample Solution on StackBlitz
function autoCalcSetup(){
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
$('form[name=transactions]').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();
$('button[name=remove]').click(function(e){
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e){
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy');
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<!DOCTYPE html>
<html lang="en">
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, shrink-to-fit=no" name="viewport">
<title>I-MED HEALTHCARE</title>
<!-- General CSS Files -->
<link rel="stylesheet" href="assets/css/app.min.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css">
<link rel="stylesheet" href="assets/bundles/select2/dist/css/select2.min.css">
<link rel="stylesheet" href="assets/bundles/jquery-selectric/selectric.css">
<link rel="stylesheet" href="assets/bundles/bootstrap-timepicker/css/bootstrap-timepicker.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/datatables.min.css">
<link rel="stylesheet" href="assets/bundles/datatables/DataTables-1.10.16/css/dataTables.bootstrap4.min.css">
<script src="https://cdn.jsdelivr.net/npm/jautocalc#1.3.1/dist/jautocalc.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Template CSS -->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/components.css">
<!-- Custom style CSS -->
<link rel="stylesheet" href="assets/css/custom.css">
<link rel='shortcut icon' type='image/x-icon' href='assets/img/imed.png' />
</head>
<body>
<div class="loader"></div>
<div id="app">
<div class="main-wrapper main-wrapper-1">
<div class="navbar-bg"></div>
<!-- top bar -->
<?php require_once("include/topbar.php"); ?>
<!-- top bar -->
<!-- side bar -->
<?php require_once("include/sidebar.php"); ?>
<!-- side bar -->
<!-- Main Content -->
<div class="main-content">
<section class="section">
<div class="section-body">
<!-- add content here -->
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3>Patient Transactions</h3>
</div>
<div class="card-body">
<div class="form-group">
<button type="button" class="btn btn-primary" data-toggle="modal"
data-target=".bd-example-modal-xl">Find Patient</button>
</div>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" style="text-align:right" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" style="text-align:right" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" style="text-align:right" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
<div class="text-right">
<button type="submit" class="btn btn-primary btn-icon icon-right" name="save"><i class="fas fa-file-invoice"></i> Process Payment</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<!-- End of Main Content -->
<!-- FIND PATIENT TABLE MODAL -->
<div class="modal fade bd-example-modal-xl" id="select-patient"tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"
aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="myLargeModalLabel">Find Patient</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="section-body">
<div class="row">
<div class="col-12">
<div class="card">
<div class="card-header">
<h4> </h4>
</div>
<div class="card-body">
<div class="table-responsive">
<?php
require_once("include/connect.php");
try{
$sql="SELECT patient_id, CONCAT(patient_lname, ', ', patient_fname, ' ', patient_mi) AS Fullname, top, pay_method FROM tbl_patientinfo WHERE isDeleted='0'";
$result=$con->prepare($sql);
$result->execute();
?>
<table class="table table-hover" id="table-1">
<thead>
<tr>
<th class="text-center">
#
</th>
<th>Patient Name</th>
<th>Age</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<?php while($row=$result->fetch()){ ?>
<tr style="cursor: pointer;">
<td><?php echo $row['patient_id']; ?></td>
<td><?php echo $row['Fullname']; ?></td>
<td><?php echo $row['top']; ?></td>
<td><?php echo $row['pay_method']; ?></td>
</tr>
<?php } ?>
</tbody>
</table>
<?php
} catch (PDOException $th){
echo "Error: ".$th->getMessage();
}
$con=null;
?>
<script>
var table = document.getElementById('table-1');
for(var i = 1; i < table.rows.length; i++)
{
table.rows[i].onclick = function()
{
//rIndex = this.rowIndex;
document.getElementById("txt-patient_id").value = this.cells[0].innerHTML;
document.getElementById("txt-patient_name").value = this.cells[1].innerHTML;
document.getElementById("txt-payMethod").value = this.cells[3].innerHTML;
$('#select-patient').modal('hide');
};
}
</script>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- End of FIND PATIENT TABLE MODAL -->
<!-- setting bar -->
<?php require_once("include/settingbar.php"); ?>
<!-- setting bar -->
<!-- footer bar -->
<?php require_once("include/footer.php"); ?>
<!-- footer bar -->
<script type="text/javascript" src="assets/bundles/CRUD/transaction.js"></script>
<!-- General JS Scripts -->
<script src="assets/js/app.min.js"></script>
<script src="assets/bundles/datatables/datatables.min.js"></script>
<script src="assets/bundles/datatables/DataTables-1.10.16/js/dataTables.bootstrap4.min.js"></script>
<!-- JS Libraies -->
<script src="assets/bundles/cleave-js/dist/cleave.min.js"></script>
<script src="assets/bundles/cleave-js/dist/addons/cleave-phone.us.js"></script>
<script src="assets/bundles/jquery-pwstrength/jquery.pwstrength.min.js"></script>
<script src="assets/bundles/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="assets/bundles/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="assets/bundles/bootstrap-timepicker/js/bootstrap-timepicker.min.js"></script>
<script src="assets/bundles/select2/dist/js/select2.full.min.js"></script>
<script src="assets/bundles/jquery-selectric/jquery.selectric.min.js"></script>
<script src="assets/bundles/sweetalert/sweetalert.min.js"></script>
<!-- Page Specific JS File -->
<script src="assets/js/page/forms-advanced-forms.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
<script src="assets/js/page/datatables.js"></script>
<!-- Template JS File -->
<script src="assets/js/scripts.js"></script>
<!-- Custom JS File -->
<script src="assets/js/custom.js"></script>
<script src="assets/js/page/sweetalert.js"></script>
</body>
<!-- blank.html 21 Nov 2019 03:54:41 GMT -->
</html>
I have a problem in adding and removing rows. When I type numbers to calculate it using jAutoCalc library, it's working. So I don't have any problem with that. But when I want to add some rows and removing some rows, it shows nothing. And I don't see anything error in my program. But according to Inspects in my Browser (I'm using Microsoft Edge), I have an error in "$new.jAutoCalc('destroy'); " and it says that "$new.jAutoCalc" is not a function.
I use this following codes:
function autoCalcSetup() {
$('form[name=transactions]').jAutoCalc('destroy');
$('form[name=transactions] tr[name=services]').jAutoCalc({
keyEventsFire: true,
decimalPlaces: 2,
emptyAsZero: true
});
$('form[name=transactions]').jAutoCalc({
decimalPlaces: 2
});
}
autoCalcSetup();
$('button[name=remove]').click(function(e) {
e.preventDefault();
var form = $(this).parents('form')
$(this).parents('tr').remove();
autoCalcSetup();
});
$('button[name=add]').click(function(e) {
e.preventDefault();
var $table = $(this).parents('table');
var $top = $table.find('tr[name=services]').first();
var $new = $top.clone(true);
$new.jAutoCalc('destroy'); //this is my error (According to Inspects in Browser)
$new.insertBefore($top);
$new.find('input[type=text]').val('');
autoCalcSetup();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<form name="transactions">
<table class="table table-hover table-bordered table-striped" name="transactions">
<thead>
<tr>
<th></th>
<th>Item</th>
<th>Quantity</th>
<th>Price</th>
<th>Item Total</th>
</tr>
</thead>
<tbody>
<tr name="services">
<td><button class="btn btn-primary" name="remove">Remove</button></td>
<td>Stuff</td>
<td><input type="text" class="form-control" name="qty" value="3"></td>
<td><input type="text" class="form-control" name="price" value="12"></td>
<td><input type="text" class="form-control" name="item_total" jAutoCalc="{qty} * {price}"></td>
</tr>
<tr>
<td colspan="2"> </td>
<td>Subtotal</td>
<td> </td>
<td><input type="text" class="form-control" name="subtotal" jAutoCalc="SUM({item_total})"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Tax</td>
<td>
<select class="form-control" name="tax">
<option value=".06">CT Tax</option>
<option value=".00">Tax Free</option>
</select>
</td>
<td><input type="text" class="form-control" name="tax_total" jAutoCalc="{subtotal} * {tax}"></td>
</tr>
<tr>
<td colspan="2"></td>
<td>Total</td>
<td> </td>
<td><input type="text" class="form-control" name="grand_total" jAutoCalc="{subtotal} + {tax_total}"></td>
</tr>
<tr>
<td colspan="4"></td>
<td><button class="btn btn-primary" name="add">Add Row</button></td>
</tr>
</tbody>
</table>
</form>
</div>
I hope you can help me with this problem. If you have any question please don't hesitate to comment down below, and I will try my best to answer it just to solve my problem here. I need to do this for our Capstone Project. Thank so much! God bless you! :D
<html>
<head>
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="css/sb-admin.css" rel="stylesheet">
<!-- Titatoggle -->
<link href="titatoggle-dist.css" rel="stylesheet">
</head>
<body>
<table class="table table-striped table-bordered" style="width:70%">
<thead>
<tr>
<th>Fields</th>
<th>Information</th>
</tr>
</thead>
<tbody>
<tr>
<!-- Customer Info -->
<td width="40%">Name</td>
<td width="60%"> <input type="text" name="name" class="form-control" style="display:table-cell; width:100%" placeholder="Enter full name"></td>
</tr>
<tr>
</tr>
<tr>
<!-- NRO POC -->
<td width="40%">Address</td>
<td width="60%"> <input type="text" name="address" class="form-control" style="display:table-cell; width:100%" placeholder="Enter address"></td>
</tr>
<tr>
<!-- Customer organization -->
<td width="40%">Company</td>
<td width="60%">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="organization" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Customer Organiztion
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
</div>
</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
I'm not sure what is causing my first two rows of my bootstrap table(table-striped) to appear dark
Faulty Table Image
I couldn't figure out how to add my CSS files but I used the bootstrap template with this link: https://startbootstrap.com/template-overviews/sb-admin/. I had to remove the rest of the table to ensure data security but it didn't have this problem other than the first two rows of the table. Also, initially I didn't even have a table header row and the problem was still there. Thanks to anyone who can help its greatly appreciated.
The bootstrap table is using the first row as table head, hence it is bold. You can overwrite the this in CSS file by adding a different class to the element.
tr:first-child td {
background-color: #your_color;
}
or
tr:nth-child td {
background-color: #your_color;
}
Or maybe you are using .table-striped class to your table.
Lets say I am reading the table contents from database and printing the table rows. Sometimes I may have more than 5 rows data in the database sometimes I may have less than 5 rows data in the database.
What I want is when the table rows exceeds 5 rows it should take scrollbar, if it is less than 5 rows it should not take scrollbar.
I have gone through many websites where they fix the table body height and if the content exceeds that height it takes the scrollbar.
So I don't want table body height to be fixed because when there is less content in the table body it will take the fixed table body size it look odd. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
</body>
</html>
My table look like below image.
Scrollable tables aren't the most fun to play around with, so I've added a snippet that should get you moving along.
$(document).ready(function(){
if( $('#results tr').length >= 5 ) {
$('#myTable').addClass('add-scroll');
}
});
.add-scroll {
overflow-y: scroll;
height: 100px;
}
#results tr td {
width: 33%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<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>
</head>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<td>
<table width="100%" height="40">
<tr>
<th width="33%">Firstname</th>
<th width="33%">Lastname</th>
<th width="33%">Email</th>
</tr>
</table>
</td>
</tr>
</thead>
<tbody scrollbars="yes" class="dyn-height">
<tr>
<td>
<div id="myTable">
<table width="100%" id="results">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
</body>
You have to count the number of rows then add class when the rows are greater than 5.
$(document).ready(function(){
var rowCount = $('tbody tr').length;
if(rowCount > 5){
console.log(rowCount);
$('table').addClass('do-scroll');
}
});
.do-scroll{
width: 100%;
height: 220px;
display: -moz-grid;
overflow-y: scroll;
}
<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>
<body style="background-color:#F0F3F4">
<div class="container">
<br/><br/><br/><br/>
<div class="well" style="background-color:#FDFEFE" ><br/>
<div class="row">
<div class="col-xs-12">
<div class="col-xs-8">
<p class="col-md-10">This is to test the functionality of this table</p>
</div>
<div class="col-xs-4">
<input class="form-control" id="myInput" type="text" placeholder="Search for a test....">
</div>
</div>
</div>
<br/>
<table class="table">
<thead class="table table-bordered" style="background-color:#EBF5FB">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody scrollbars="yes" id="myTable" class="dyn-height">
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#mail.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#greatstuff.com</td>
</tr>
</tbody>
</table>
<p>Note that we start the search in tbody, to prevent filtering the table headers.</p>
</div>
</div>
Can someone explains how is that possible that an inputof type "submit" is placed at the top-left although it's inside the third <tr>
I can change its position to the right place through margin and position properties, but there should be no need for them at all in this case.
see the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>
Insert td like this:
<td> <---------------
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td> <--------------
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td>
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
you forgot to add td in your tr section, and because your third tr has only one td, you must set colspan to 3 as it's property...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<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.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div style="border:2px solid black;margin-top:10%;">
<div class="row">
<table style="margin-left:10%;width:85%;" class="table table-hover">
<thead>
<tr>
<th>album name</th>
<th>Number of images</th>
<th>Order</th>
</tr>
</thead>
<tr>
<td>
<input placeholder="album's name" name="album_name">
</td>
<td>
<input placeholder="#of images eg.8" id="no_of_images" name="NoOfImages">
</td>
<td>
<input placeholder="order between other albums eg. 1" name="album_order">
</td>
</tr>
<tr>
<td colspan="3">
<input style="" class="btn btn-info btn-md" value="Submit" name="submit">
</td>
</tr>
</table>
<table style="margin-top:10%;" id="images_table" class="table table-hover">
</table>
</div>
</div>
</div>
</body>
</html>