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>
Related
<div class="col-md-12" style="padding: 10px">
<div class="card m-b-30">
<div class="card-header container-fluid" ">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-12 table-responsive">
<div id="order-listing_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
<div class="row">
<div class="col-md-12">
<table id="order-listing" class="table dataTable no-footer table-striped" style="border-bottom:1pt solid black" role="grid" aria-describedby="order-listing_info">
<thead>
<tr role="row">
<th width="70%"><b>Name</b></th>
<th><b>Active</b></th>
<th><b>Select</b></th>
<th><b>Delete</b></th>
</tr>
</thead>
<tbody>
#*#foreach (var item in Model)
{*#
<tr>
<td>
<div class="input-group">
<input type="text" class="form-control" placeholder="Search here" style="width: 450px; height: 40px">
<div class="input-group-append">
<button class="btn btn-secondary" type="button">
<i class="dripicons-search"></i>
</button>
</div>
</div>
</td>
<td>
<input type="checkbox" name="checkbox2">
</td>
</tr>
<tr>
<td>Test New</td>
<td><input class="form-check-input" type="checkbox" id="gridCheck"></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-editbtn-id"><div><i class="icon-pencil"></i></div></button></td>
<td><button type="button" class="btn btn-icons btn-inverse-secondary" id="data-delete-id"><div><i class="dripicons-trash"></i></div></button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I tried aligning this checkbox with the Active column but my code doesn't align it with the specified column
whats wrong with my code?
some online HTML generates output the correct code with same code but when i edit it, the aligned doesn't work properly
I have attached my code above can anyone help me im using html and css for this.
Please give the below CSS, the input element is taking CSS of margin-left.
.form-check-input{
margin:0 !important;
}
And also give this CSS
.table td, .table th{
vertical-align: middle;
}
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 see two issues with my code. Header is not getting fixed and second issue is word wrap is not applicable for the headers/rows.
I have used bootstrap classes, but still facing issues. I want to fix the table header and only rows should be scrollable and if the text is long it should automatically word wrap. I have multiple columns in my application(approximately 15 columns).Please advice.
To view the sample code click here.
Sample html code:
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body" id="modal-body">
<table id="myTable" class="table table-fixedheader table-bordered table-striped">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2Header2Header2Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col-md-3">111111111111111111111111111111111111111111111111111111111111111111111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5443545435354543</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5437665</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">5435435443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">33333</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">68678454</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">786876</td>
<td class="col-md-3">8787876</td>
<td class="col-md-4">6765767</td>
</tr>
<tr class="row">
<td class="col-md-3">7656765</td>
<td class="col-md-4">656456</td>
<td class="col-md-3">116611</td>
<td class="col-md-4">43434</td>
</tr>
<tr class="row">
<td class="col-md-3">43243432434324342</td>
<td class="col-md-4">33344343233</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">4343</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">432434343243243</td>
<td class="col-md-3">1111</td>
<td class="col-md-4">432443</td>
</tr>
<tr class="row">
<td class="col-md-3">1111</td>
<td class="col-md-4">333333</td>
<td class="col-md-3">111312312123121</td>
<td class="col-md-4">32112</td>
</tr>
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
You could try a non table approach. If your ok with having set widths on the columns with content wrapping in the cells. Here's an example https://codepen.io/flurrd/pen/jmMNxK?editors=1100
Note: Class names are terrible in this example. I'd BEM it up for proper usage.
.table-body {
max-height: 200px;
overflow-y:auto;
}
.t-row {
display: flex;
border-bottom: 1px solid grey;
}
.t-row:nth-child(even){
background: #e3e3e3;
}
.col {
word-wrap: break-word;
flex: 1 0 30%;
max-width: 33.3333%;
}
.cell {
padding: 8px;
}
<div class="table-wrap">
<div class="t-row t-header">
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
<div class="col">
<div class="cell">
Header 1
</div>
</div>
</div>
<div class="table-body">
<div class="t-row">
<div class="col">
<div class="cell">
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
</div>
</div>
<div class="col">
<div class="cell">
1111
</div>
</div>
<div class="col">
<div class="cell">
11111111
</div>
</div>
</div>
</div>
</div>
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>
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;
}