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">
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>`
I am using bootstrap 4 grid to create electron layout and success to create what I want, but I have problem when I fill each grid with data, it comes messy.
I am using this approach for create my layout :
Set div height equal to screen size
The layout what I want look like this :
This is what I get with my code :
But if I fill more data, it comes look like this :
This is my code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.full-height {
height: 100vh;
overflow: auto;
}
</style>
<title>Test 123</title>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-sm-3 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 1</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<h2>Section title 2</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-sm-4 bg-light full-height">
<h2>Section title3</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
<tr>
<td>1,001</td>
<td>Lorem</td>
<td>ipsum</td>
<td>dolor</td>
<td>sit</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-sm-5 bg-light full-height">
<div class="row">
<div class="col" style="height:50vh;">
<h2>Section title 4</h2>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<div class="w-100"></div>
<div class="col" style="height:50vh;">
<video width="95%" height="95%" controls><source src="video.mp4" type="video/mp4"></video>
</div>
</div>
</div>
</div>
</div>
</body>
<script src="renderer.js"></script>
</html>
Is it possible make each grid like self container which have its own area?
I would add wrappers for you divs. Now your content should not overflow its wrapper. This should work.. :)
For example:
<div class="row">
<div class="div-wrap" style="overflow:hidden; height: 'your-height';">
<div class="col">
...content
</div>
</div>
</div>
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 got 2 tables with same HTML and both declared as:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<table class="table table-sm table-hover table-responsive">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
And this is what I got on my screen:
The second and consecutive tables declared with the same HTML don't get 100% width on thead and tbody...
What is wrong here?
UPDATE:
My first table was working because of the content of the last line, it was long enough to make it fit 100% on my card div.
Actually it's a issue on Bootstrap 4, so the -2 reputation on this question are invalid. Thanks.
Found out that it's a issue on Bootstrap V4, you can see in this issue, and my first table is not working, it's just the content of the last line that is long enough to fullfil the table width, so it looks like it works.
EDIT: It got fixed by adding the class table-responsive as a parent div of the table, here is the ship list for the fix and the issue that reported the bug.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col-12 col-md-6">
<div class="card">
<div class="card-body">
<div class="table-responsive">
<table class="table table-sm table-hover">
<thead>
<tr>
<th>Item 01</th>
<th>Item 02</th>
</tr>
</thead>
<tbody>
<tr>
<td>Item 01</td>
<td>Item 02</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
My tables display fine on desktop, but once I try to view the mobile version my table ends up being too wide for the mobile device screen. I am using a responsive layout.
How can I set this table to be displayed fine in the mobile
This is my code
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/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 clearfix">
<div class="col-xs-12">
<div class="card">
<div class="body">
<div class="table-responsive">
<table id="myTable" class="table table-bordered table-striped table-hover js-basic-example dataTable">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
Another option might be to enable horizontal scrolling for the table by adding overflow-x:auto; to the stylesheet for the parent div.
div.table-responsive {
overflow-x:auto;
}
Don't try to fight fisics, my friends. Maybe you can hide the less important columns using media queries, show 3 instead of 6