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,
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>`
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
Why there is an extra column in the table?
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
<center>
<a href="./" class="btn btn-primary">
<i class="far fa-hand-point-left"></i> Back
</a>
<br /><br />
<table class="table table-striped table-hover table-bordered table-responsive">
<thead>
<tr>
<th>Sr.</th>
<th>Name</th>
<th>Contact</th>
<th>City</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
Name</td>
<td>Email Id (Mobile Number)</td>
<td>City</td>
<td><button class="btn btn-large btn-primary" disabled>Waiting for Directory</button></td>
</tr>
<tr>
<td>2</td>
<td>
Name</td>
<td>Email Id (Mobile Number)</td>
<td>City</td>
<td>Block</td>
</tr>
</tbody>
</table>
</center>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
Why there is an extra column in the table? see image
Also, why there is scrollbar when screen is small? (It should adjust itself with the screen as I am using table-responsive.)
add .table-responsive class to the parent. not on table
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Remove .table-responsive or add style attribute on table tag display : table
I have a simple Bootstrap 4 table with 2 columns - I would like to be able to align some of the text in the top right column to the right, whilst leaving the remaining text in that cell left aligned.
Here's my table:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I'm trying to get the On Special string to be aligned to the right and on the same line as the SKU value - I've tried playing with and and but can't seem to get this to work. I'm not sure if this is even possible or if there's another way to tackle this problem?
It's quite simple; you just need to replace,
<div class="text-right">On Special</div>
with
<div class="float-right">On Special</div>
Find the complete working code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span style="float: right;">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
.text {
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
Just change you this code :
<div class="text-right">On Special</div>
To this code :
<div style="float:right;">On Special</div>
You could start with something like this.
.text-right {
display: inline;
position: absolute;
right: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<div class="text-right">On Special</div>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<table class="table table-striped table-bordered">
<tr>
<td width=20%>SKU:</td>
<td width=80%>PM432523
<span class="float-right">On Special</span>
</td>
</tr>
<tr>
<td>Supplier:</td>
<td>Acme Meat Inc</td>
</tr>
</table>
I want to put two bootstrap tables side by side like it is answered in this question:
Two side by side tables in bootstrap
Unfortunately I don't get the result mentioned there.
My Code looks like this:
<html>
<style>
body {background-color: black;}
</style>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="webjars/bootstrap/3.3.5/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="webjars/datatables-bootstrap/2-20120201/DT_bootstrap.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-jqueryui.css"/>
<link rel="stylesheet" type="text/css" href="css/ffw-spring-bootstrap.css"/>
<script type="text/javascript" src="webjars/datatables/1.10.5/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
And what I get looks like this:
Thanks in advance
Try Its :
<!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.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="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</body>
</html>
You have typo in your code. you need to replace
<div class="col-sx-6">
with
<div class="col-xs-6">
You've made a typo on both the columns.
You wrote col-sx-6 instead of col-xs-6. (column, show it like this on extra small screens and bigger, width of 6)
When using col-sx-6, it is just a div, which will be 100% wide.
Changing it to col-xs-6 will fix your problem.
Also, in bootstrap it is common to place your <div class="row"> inside a <div class="container">.
See: https://getbootstrap.com/docs/3.3/css/#overview-container
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<h1>Your code, using col-xs-6</h1>
<div class="row">
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-sx-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
<h1>Corrected code using col-xs-6</h1>
<div class="row">
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
You should do something like below, for all resolutions:
col-lg-6 col-md-6 col-sm-6 col-xs-6
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Location</th>
<th>Message</th>
</tr>
</thead>
</table>
</div>
</div>
If you want two tables(side by side) in mobiles screen and desktop screen, then - change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-6 col-xs-6">
And if you want two tables in desktop screen and not in mobile screen.
Change this <div class="col-sx-6"> to <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">