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
Related
This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>
You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<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.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody
use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`
FACING ISSUE IN CREATING MULTIPLE TABLE FILTERS IN HTML TABLE.
Following is the HTML code wherein I'm trying to filter out data on the basis of 3 columns(here, table has a total of 4 columns). The last column is just a URL hence doesn't need filtering.
But the filters aren't working.
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
I have tried all the things here, but still the code isn't working. I'd be glad if someone could help to resolve this issue as soon as possible.
This might work:
<!doctype html>
<html lang="en">
<head>
<title>Problems Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="css/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
var $filterableRows = $('#tableF').find('tr').not(':first'),
$inputs = $('.search-key');
$inputs.on('input', function() {
$filterableRows.hide().filter(function() {
var $filterableColumns = $(this).find('td').not(':last');
return $filterableColumns.filter(function() {
var tdText = $(this).text().toLowerCase(),
inputValue = $('#' + $(this).data('input')).val().toLowerCase();
return tdText.indexOf(inputValue) != -1;
}).length == $filterableColumns.length-1;
}).show();
});
});
</script>
</head>
<body>
<h1 style="text-align:right;"><strong>CODER'S GYM</strong></h1>
<section class="ftco-section">
<div class="container">
<div class="row justify-content-center">
<div class="col-md-6 text-center mb-5">
<h2 class="heading-section"><i><u>Problems Arena</u></i></h2>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h4 class="text-center mb-4">Click on <strong>Try</strong> to Solve</h4>
<input type="text" id="Code" class="search-key" placeholder="Code">
<input type="text" id="Title" class="search-key" placeholder="Title">
<input type="text" id="Difficulty" class="search-key" placeholder="Difficulty">
<div class="table-wrap">
<table id="tableF">
<thead class="thead-primary">
<tr>
<th>Code</th>
<th>Title</th>
<th>Difficulty</th>
<th>Try</th>
</tr>
</thead>
<tbody>
<tr>
<td data-input="Code">ABC</th>
<td data-input="Title">Two Sum</td>
<td data-input="Difficulty" >Easy</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">BCD</th>
<td data-input="Title">Add Two Numbers</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">CDE</th>
<td data-input="Title">Longest Substring Without Repeating Characters</td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">DEF</th>
<td data-input="Title">Median of Two Sorted Arrays</td>
<td data-input="Difficulty" >Hard</td>
<td>Try</td>
</tr>
<tr>
<td data-input="Code">EFG</th>
<td data-input="Title">Longest Palindromic Substring </td>
<td data-input="Difficulty" >Medium</td>
<td>Try</td>
</tr>
<tr>
<td border-bottom-0" data-input="Code">FGH</th>
<td class="border-bottom-0" data-input="Title">Zingzag Conversion</td>
<td class="border-bottom-0" data-input="Difficulty" >Medium</td>
<td class="border-bottom-0">Try</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</section>
</body>
</html>
We put all you javascript inside $(document).ready(function() {}); In this way, html table object is rendered, and ready to be filtered.
And also I suggest you to use the last jQuery code, that is at our day, jquery 3.6.0.
I have bootstrap table that looks like this:
As you can see the first column's text doesn't fit. How can I make first column text fit the column ?
Here's the code:
<div class="row">
<div class="col-md-12">
<div class="portlet light ">
<div class="portlet-body">
<table class="table table-striped table-bordered table-hover table-checkable order-column" id="matches_table">
<tbody>
{% for field, value in object.items %}
<tr class="odd gradeX">
<td width=""><b>{{ field|field_name_split|title }}</b></td>
<td width="">{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
</div>
</div>
</div>
Your code, don't have the . Below I have added a sample table bootstrap code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Hover Rows</h2>
<p>The .table-hover class enables a hover state (grey background on mouse over) on table rows:</p>
<table class="table table-striped table-bordered table-hover table-checkable order-column">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Thanks,
I am using default bootstrap tooltip in my table header. It shows irrelevant behavior, like- it increases the width of the header.
here is the codepen link
https://codepen.io/tumulalmamun/pen/mpQzBV
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
<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.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">
<h3>Tooltip Example</h3>
<p>The data-placement attribute specifies the tooltip position.</p>
<div class="row">
<div class="col-lg-3">
<table class="table table-bordered table-hover table-striped">
<thead>
<tr><th colspan="2"> status (Overall)</th></tr>
<tr>
<th colspan="2" data-toggle="tooltip" data-placement="right" title="Hooray!">
Pending
</th>
</tr>
<tr>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">M</th>
<th data-toggle="tooltip" data-placement="right" title="Hooray!">O</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-3"></div>
<div class="col-lg-3"></div>
</div>
</div>
</body>
</html>
The fix is to add the tool-tip to an element inside of th/td instead of directly on it. (I have added divs around the text you see in your example)
<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th colspan="5">Pre-Recruitment status (Overall)</th>
</tr>
<tr>
<th rowspan="2" colspan="2">Status </th>
<th rowspan="2">Candidate</th>
<th colspan="2">
<div data-toggle="tooltip" data-placement="right" title="Hooray!">Panding Doc.</div>
</th>
</tr>
<tr>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">M</div>
</th>
<th>
<div data-toggle="tooltip" data-placement="right" title="Hooray!">O</div>
</th>
</tr>
</thead>
</table>
When a tool-tip is displayed it adds a new div to the markup directly after the element with the data-toggle="tooltip" attribute on it (Inspect using dev tools to see this happening). Therefore it will break your table layout because a tool-tip will be placed after the table element. If it is done inside a table element the layout will not be affected.
I have forked your codepen with the solution.
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>