I'm not sure how to exactly describe this problem, but in conclusion if my Bootstrap panel contains data, then 2nd one is pushed down a bit. I have attached a picture below of it happening.
enter image description here
Panel on left HTML
<div class="panel panel-default text-left fw-6" style="overflow: hidden;">
<div class="panel-heading">
<h3 class="panel-title"><b>Stats</b></h3>
</div>
<div class="panel-body">
<div class="info" style="text-align: center; font-weight: bold; font-size: 30px">data</div>
<div class="break" style="height: 1px; background-color: black; overflow: hidden; margin: 9px"></div>
<div class="totalBet" style="text-align: center; font-weight: bold; font-size: 16px;">data</div>
<div class="totalProfit" style="text-align: center; font-weight: bold; font-size: 16px;">data</div>
</div>
</div>
Panel on right
<div class="panel panel-default text-left fw-6" style="overflow: hidden;">
<div class="panel-heading">
<h3 class="panel-title"><b>Transactions</b></h3>
</div>
<div class="panel-body">
<table class="table table-striped no-footer">
<tbody>
<tr>
<th>ID</th>
<th>Type</th>
<th>Amount</th>
<th>Time</th>
<th>Transaction Hash</th>
</tr>
</tbody>
</table>
</div>
</div>
Related
I would like to position a div at the right edge bottom of a table. I am using bootstrap and I found out using offest I can move the div right at the bottom corner of the table but I did not like this solution as seems not to work correctly. So how can I position a div right at the bottom corner of a table that is inside a modal. the following block is the one that I am trying to position right bottom of the table:
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
Full code:
<div class="modal fade" id="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-10">
<div class="panel panel-primary panel-primary-trim">
<div class="panel-heading">
<h3 class="panel-title"></h3>
</div>
<div class="panel-body panel-body-trim">
<div class="table-responsive">
<table id="items-job-payments-modal-table" class="table table-striped">
<thead>
<tr>
<th>Date</th>
<th>Amount</th>
</thead>
<tbody>
<tr>
<td>DateExample</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-2 col-md-offset-10 col-sm-offset-9 col-xs-offset6">
<div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
<div class="form-group">
<label id=""></label>
<label id=""></label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I would place the table into an inline-block div (wrapper) that has relative positioning, then use absolute positioning (bottom: 0, right: 0) for the element you want at the bottom right. The table and the positioned element are both children of the relative positioned wrapper.
table {
border-collapse: collapse;
}
td {
padding: 3rem;
background: #ccc;
border: none;
border: 1px solid white;
}
.wrapper {
display:flex;
flex-direction: row;
height: auto;
justify-content: flex-start;
align-items: flex-end;
flex-wrap: no-wrap;
}
.bottomRight {
position: relative;
background: #bbb;
padding: 1rem;
padding: 3rem;
width: auto;
height: auto;
display: block;
border: 1px solid white;
border-left: none;
}
<div class='wrapper'>
<table>
<thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
<tr>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
</tbody>
</table>
<div class="bottomRight">10</div>
</div>
I have three divs(panels) on one page. In two panels there are tables and when i open that page on smaller display it breaks design. So i wonder is it possible to add some button on panels for collapsing so that user can collapse panels that he doesn't need when open page on smaller display.
Here is my HTML code:
<div class="row">
<div class="col-md-2">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory
</div>
<div class="panel-body">
<img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo"/>
</div>
</div>
</div>
<div class="col-md-4">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory centers
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover" ng-table="centersTable">
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory services
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
</table>
</div>
</div>
</div>
</div>
</div>
It would be great if that button could be in panel-heading on right place and when user click on it it hide that panel and if it click again it open panel.
I was looking something on internet but i couldn't find anzthing that could help me.
P.S. I'm using AngularJS if that is important for this.
Could someone pls help me with this problem ?
I am including tr tag and td tag inside the table tag
also adding CSS(margin-top or margin-bottom) for the respetive Div
you can check below code
var app = angular.module('myApp', []);
app.controller('customersCtrl', function() {
});
table, th , td {
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #f1f1f1;
}
table tr:nth-child(even) {
background-color: #ffffff;
}
.marginTop{
margin-top:25px;
}
.marginBottom{
margin-bottom:25px;
}
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="customersCtrl">
<div class="row">
<div class="col-md-2">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory
</div>
<div class="panel-body">
<img file-url="logo" thumbnail="true" class="img-logo" ng-show="logo" />
</div>
</div>
</div>
<div class="col-md-4 marginTop">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory centers
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
<tr>
<td>your table1 data1</td>
<td><button>button1</button></td>
</tr>
<tr>
<td>your table1 data2</td>
<td><button>button2</button></td>
</tr>
<tr>
<td>your table1 data3</td>
<td><button>button3</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-6 marginTop">
<div class="hpanel hblue">
<div class="panel-heading" translate>
Factory services
</div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover nowrap" ng-table="servicesTable">
<tr>
<td>your table2 data1</td>
<td><button>button1</button></td>
</tr>
<tr>
<td>your table2 data2</td>
<td><button>button2</button></td>
</tr>
<tr>
<td>your table2 data3</td>
<td><button>button3</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I have html code which is used to display two tables. When I run the program the two tables appear one below the other, but I want the two tables to be on the extreme left.
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 50px;
margin-left: auto;
margin-right: auto;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="jiratable" style="display: none;">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
The output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Expected Output is:
Number Name UserId count
1 Ram 56782 1
2 Raj 56187 2
Here for sample I am writing only one table output, but in actuality there are two tables each, one below the other.
Just remove the margin-left and margin-right. You can also remove the width because tables always automatically are as wide as their content and there's nothing you can do about it.
body {
background-color: #E6E6FA;
}
table {
font-family: arial, sans-serif;
border-collapse: collapse;
}
td,
th {
border: 1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading">Reportees List</div>
<table id="employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<div id="jiratable">
<div class="container text-center">
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id="Jira_table" class="table table-hover" cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id="sendmail">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id="sendMail" class="btn btn-primary btn-lg pull-right" onclick="sendMail()">SendMail</button>
</div>
</div>
Use float property. In this case, you want to float your element to the left.
<!DOCTYPE html>
<html>
<head>
<style>
table{
font-family:arial,sans-serif;
border-collapse: collapse;
width:50px;
margin-left: auto;
margin-right: auto;
float:left;
}
td,
th{
border:1px solid #dddddd;
text-align: center;
padding: 20px;
}
#table {
margin-left: -850px;
}
</style>
<body style="background-color: #E6E6FA">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary">
<div class="panel-heading" >Reportees List</div>
<table id = "employee_table" class="table table-hover" cellspacing="0">
<tr>
<th>Number</th>
<th>Name</th>
<th>UserId</th>
<th>Count</th>
</tr>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="jiratable" style="display: none;">
<div class="container text-center" >
<div class="row">
<div class="col-sm-4">
<div class="panel panel-primary" style="width: 240%;">
<div class="panel-heading">JIRA - List</div>
<table id = "Jira_table" class="table table-hover"
cellspacing="0">
<thead>
<tr>
<th width="80">Number</th>
<th>JiraNumber</th>
<th>JiraStatus</th>
<th>EmailId</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</div>
</div>
<div id ="sendmail" style="display: none;">
<div class="container">
<div style="text-align:right; width:100%; padding:0;">
<button id ="sendMail" style='margin-right:16px' class="btn btn-
primary btn-lg pull-right">Cancel</button>
<button id ="sendMail" class="btn btn-primary btn-lg pull-right"
onclick="sendMail()">SendMail</button>
</div>
</div>
</body>
</html>
This question already has answers here:
How to add a margin to a table row <tr> [duplicate]
(18 answers)
Closed 5 years ago.
I try to put small space in table <tr> but I can't do it, I try to do that, but not change it, how can I fix it? To understand about my question look at this image:
.panel-booking .panel-body {
padding: 0px;
height: 100px;
}
.panel-booking {
top:-60px; position:relative;
}
.tab-tb2 .nav-tabs li a {border-left: 1px solid #bfc1c3;height: 25px;}
#line-booking hr{margin-top: -45px; margin-left: 1px; width: 408px;color: #f00;
background-color: #ececec;
height: 1px;}
.booking-left-btn tr {line-height:30px;}
.booking-left-btn table, th, td {
}
.booking-left-btn th, td {
padding: 5px;
text-align: left;
}
.booking-left-btn .btn {
display: inline-block;
padding: 12px 7px;
margin-bottom: 21px;
font-size: 14px;
margin-left: -15px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
background-color: none;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid #bdc4cb;
border-radius: 10px;
}
.booking-left-btn .room-detials {
text-align: center;
margin-left: -2px; color: #53585f;
}
.booking-left-btn .room-number {
text-align: center;
font-size: 15px;
color: #444444;
}
.booking-left-btn .panel-default {
border-color: #ddd;
height: 67px;
-moz-border-radius: 12px;
-webkit-border-radius: 12px;
-ie-border-radius: 12px;
-opera-border-radius: 12px;
-chrome-border-radius: 12px;
border-radius: 11px;
overflow: hidden;
width: 329px;
margin-left: -5px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="panel-booking">
<div class="booking-left-btn" style="margin-left:25px;">
<table style="width:100%">
<tr>
<td><button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Mahesh H</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
<tr>
<td > <button type="button" class="btn btn-default"> <div class="room-detials">Room</div>
<div class="room-number">1</div></button></td>
<td> <div class="panel panel-default">
<div class="panel-heading">Panel with panel-default class</div>
<div class="panel-body">Panel Content</div>
</div></td>
</tr>
</table>
</div>
</div>
can you try using This can be used as trick
Use
<div class="panel-body"> Panel Content</div>
If in between table then use cellspacing="20" in your table tag
Have probably simple question but can't figure out what's wrong. I am using bootstrap table to show the data. The table is responsive and resizing correctly when the user changes the browser size with only one exception which I can't find the solution to.
Look at the picture I liked to. There are 3 states:
1st when looks normally on full browser size
2nd when user would resize - still ok
3rd when it's been resized a lot then it messes up
Link:
https://www.dropbox.com/s/23pj6w2uu0lz716/fine-fullwith.png?dl=0
Counting on your help.
See my code below:
<style type="text/css">
p {
/*padding: 5px;*/
font-size: 13px;
text-align: center;
word-wrap:break-word;
}
.ar {
height: 50px;
}
.table tbody > tr > td.vert-align_td {
vertical-align: middle;
}
.table thead > tr > th.vert-align_th{
vertical-align: middle;
}
</style>
<div class="container-fluid">
<div class="row">
<div class="col-sm-1 col-lg-2">
</div>
<div class="col-sm-11 col-lg-10">
<div class="row">
<div class="col-md-12">
<div class="content-wrapper"></div>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered table-hover" style="word-wrap: break-word;table-layout: fixed;">
<thead>
<tr>
<th class="col-md-3 text-center vert-align_th">Nazwa transportu</th>
<th class="col-md-2 text-center vert-align_th">Typ transportu</th>
<th class="col-md-2 text-center vert-align_th">Kierowca</th>
<th class="col-md-1 text-center vert-align_th">Numer rejestracyjny</th>
<th class="col-md-1 text-center vert-align_th">Firma spedycyjna</th>
<th class="col-md-1 text-center vert-align_th">Data przyjecia</th>
<th class="col-md-1 text-right vert-align_th">Przycisk</th>
</tr>
</thead>
<tbody>
#For Each item In Model
#<tr>
#*vert-align - look at top in css section*#
<td class="col-md-3 text-center vert-align_td"><a>#item.NazwaTransportu</a></td>
<td class="col-md-2 text-right vert-align_td">#item.TypTransportu</td>
<td class="col-md-2 text-center vert-align_td">#item.Kierowca</td>
<td class="col-md-1 text-center vert-align_td">#item.NumerRejestracyjny</td>
<td class="col-md-1 text-center vert-align_td">#item.FirmaSpedycyjna</td>
<td class="col-md-1 text-center vert-align_td">#item.DataPrzyjecia</td>
<td class="col-md-1 text-center vert-align_td">
<a rel="tooltip" class="btn btn-success btn-xs" href="">
<i class="glyphicon glyphicon-plus icon-color"></i>
dodaj
</a>
</td>
</tr>
Next
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
[1]: http://i.stack.imgur.com/jrybd.png
Bootstrap Tables contain the CSS attribute white-space: nowrap; on every table cell (<td>). This comes by adding the class table-responsive. You can however reset this attribute with the following CSS snippet:
.table tbody > tr > td.vert-align_td,
.table tbody > tr > th.vert-align_th {
white-space: normal;
}