I'm using bootstrap 4, i want to center the div with id of table vertically in the center of the view screen , i try to use ```align-items-center on it's parent element but that does not work.
here is my HTML :
<div id="gameTable" class="d-flex h-100">
<div class="container align-items-center text-center h-100">
<table class="table text-center" id="table">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">2</td>
<td class="align-middle">3</td>
</tr>
<tr>
<td class="align-middle">4</td>
<td class="align-middle">5</td>
<td class="align-middle">6</td>
</tr>
<tr>
<td class="align-middle">7</td>
<td class="align-middle">8</td>
<td class="align-middle">9</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" id="quit">Quit Game</button>
</div>
</div>
and here is my css :
html, body {
height: 100%;
}
#table {
height: 70%;
}
#gameTable {
height: 100%;
display: none;
}
can anyone tell me what is wrong with my codes.
align-items-center should be used with the flexbox container (d-flex). You can also somplify your code like below:
#table {
height:70%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" rel="stylesheet">
<div id="gameTable" class="d-flex align-items-center vh-100">
<div class="container text-center" id="table">
<table class="table text-center h-100">
<tbody>
<tr>
<td class="align-middle">1</td>
<td class="align-middle">2</td>
<td class="align-middle">3</td>
</tr>
<tr>
<td class="align-middle">4</td>
<td class="align-middle">5</td>
<td class="align-middle">6</td>
</tr>
<tr>
<td class="align-middle">7</td>
<td class="align-middle">8</td>
<td class="align-middle">9</td>
</tr>
</tbody>
</table>
<button class="btn btn-danger" id="quit">Quit Game</button>
</div>
</div>
Related
How to remove gap between two td ? I have tried some below solutions
from the Internet but none of them work. Attached the screenshot for
reference too. It will give clear idea of problem. The gap between two TD is very wide. How to reduce this Gap.
class="align-middle"
CELLSPACING=0
row-gap: 0;
class="views-field views-field-region views-align-center"
<app-header></app-header>
<section class="container">
<div class="row" style="background-color: white;">
<div class="col-xs-12 col-sm-8 col-md-4" >
<form action="/update/pricelist" method="POST" id="upload-file" enctype="multipart/form-data">
<h3>Import Pricelist</h3>
<hr>
<div class="wrapper-messages">
</div>
<br>
<input type="file" name="price_list" id="edit_price_list" (change)="ReadExcel($event)">
<div class="error-msg"></div>
<hr>
<div class="views-exposed-widget views-submit-button">
<button type="submit" class="btn btn-info form-submit icon-before submit-pricelist">
<span class="icon glyphicon glyphicon-ok" aria-hidden="true"></span>
Import
</button>
</div>
<br>
</form>
</div>
</div>
</section>
<!-- Table for excel -->
<div class="main-container container-fluid">
<div class="row">
<section id="block-views-exp-land-page" class="block block-views clearfix">
<form autocomplete="off" action="" method="post" id="views-exposed-form-land-page" accept-charset="UTF-8">
<div>
<section id="block-system-main" class="block block-system clearfix">
<div
class="view view-land view-id-land view-display-id-page table-checkbox-all view-dom-id-8d32f83bab6c36c396b926a7c7c35f7f">
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr>
<th class="views-field views-field-region views-align-center">
Autodesk Material Description
</th>
<th class="views-field views-field-php-4 views-align-center">
Autodesk SAP Material Description
</th>
<th class="views-field views-field-php-2 views-align-center">
Product Coming From
</th>
<th class="views-field views-field-php-2 views-align-center">
Media
</th>
</tr>
</thead>
</table>
</div>
</div>
<div class="view-content">
<div class="table-responsive" class="col-10" class="row align-items-center" class="col-md-12">
<table class="views-table cols-16 table table-hover table-0 table-0 table-0 neilsoft-region-table">
<thead class="neilsoft-region-table-head">
<tr *ngFor="let pricedata of ExcelData" class="align-middle">
<td>
{{pricedata.Autodesk_Material_Description}}
</td>
<td>
{{pricedata.Autodesk_SAP_Material_Description}}
</td>
<td>
{{pricedata.Product_Coming_From}}
</td>
<td>
{{pricedata.Media}}
</td>
</tr>
</thead>
</table>
</div>
</div>
</section>
</div>
</form>
</section>
</div>
</div>
<app-footer></app-footer>[enter image description here][1]
I suggest you looking for html table colspan (https://html.com/tables/rowspan-colspan/). With colspan you can merge two td cells. Take a look in the example below:
td {
width: 30px;
}
<table border="1">
<tr>
<td colspan="2">Merged</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Perhaps border-collapse: collapse; is what you’re missing?
td {
background: red;
color: white;
padding: 0.5em;
}
.t1 {
margin-top: 2em;
border-collapse: collapse;
}
<table>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
<table class="t1">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
</table>
I would like to remove the white space between Table Title and Sub Titles.
Also Sub Title "Sub1" together with the icon should be left-aligned within the cell
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<span class="text-left">Sub1</span>
<span class="material-icons refresh-icon">refresh</span>
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td class="text-left">B</td>
<td>16.3%</td>
</tr>
<tr>
<td class="text-left">V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You need do with some css for remove that space
apply this css into ur css file margin-bottom: 0; will remove space from table-responsive and card title
.card-title{
background-color: #aed581;
padding: 15px;
font-weight: bold;
margin-bottom: 0;
}
.fa-repeat{
color: lightgray;
cursor: pointer;
}
and for icon i used font-awesome icon here is the CDN link
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
Here is the HTML
<div class="mdc-layout-grid__cell stretch-card mdc-layout-grid__cell--span-3">
<div class="mdc-card p-0">
<h6 class="card-title">Table title</h6>
<div class="table-responsive">
<table class="table">
<thead bgcolor="#aed581">
<tr>
<th>
<i class="fa fa-repeat"></i>
Sub1
<!-- <span class="material-icons refresh-icon">refresh</span> -->
</th>
<th>Sub2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-left">A</td>
<td>18.5%</td>
</tr>
<tr>
<td>B</td>
<td>16.3%</td>
</tr>
<tr>
<td>V</td>
<td>15.5%</td>
</tr>
</table>
</div>
</div>
</div>
You can edit or preview code here
I have a html table whose headers need to be fixed. I am using bootstrap classes to make html headers fix, but i see many issues with that.
Please find the sample here.
Issues i'm facing are Header is not displayed starting from first column, word wrap is not applied for the columns header or the columns. Please advice. Is there any better way to solve this.
html code:
<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-7">Header1</th><th class="col-md-4">Header2</th><th class="col-md-3">Header3</th><th class="col-md-4">Header4</th></tr>
</thead><tbody>
<tr><td>1111</td><td>33333</td><td>1111</td><td>3333322222222222222222222222222222</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>112222222222222215555555551</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr> <tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
<tr><td>1111</td><td>33333</td><td>1111</td><td>33333</td></tr>
</tbody> </table>
</div>
1.) The cells in your header tr have Bootstrap classes which add up to a width of 18 columns (7+4+3+4), but one row can only fit 12 columns in the bootstrap grid system.
2.) You write that wordwrap is not applied, but you don't have any CSS rules for wordwrap anywhere.
You're using class .row on one row only :
<tr class="row">
<th class="col-md-7">Header1</th>
<th class="col-md-4">Header2</th>
<th class="col-md-3">Header3</th>
<th class="col-md-4">Header4</th>
</tr>
You either use the same class on each row or just delete it and leave the rows without a class.
<tr></tr>
this would fix your issue.
Only simple thing missed is using the same structure (Or CSS classes), I've checked the code from your fiddle and this should work for the scenario you've presented.
<!-- Button trigger modal -->
<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 table-scroll">
<thead>
<tr class="row">
<th class="col-md-3">Header1</th>
<th class="col-md-4">Header2</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">1111</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 -->
Okay:
For Word-wrap in continuous text
add " word-break: break-all;" (see the CSS below)
FOR Fixed Header
Refer the 'table-scroll' class in the HTML markup above
AND
Add the following CSS:
.modal-body {
/*max-height: calc(100vh - 210px);*/
height:300px;
width:90%;
overflow: hidden;
word-break: break-all;
}
.table-scroll tbody {
position: absolute;
overflow-y: scroll;
height: 400px;
}
.table-scroll tr {
width: 100%;
table-layout: fixed;
display: inline-table;
}
.table-scroll thead > tr > th {
border: none;
}
repalce this
<tr class ="row" >
with this
<tr>
your updated fiddle http://jsfiddle.net/girish28892/ZcLSE/1431/
i am trying to set th width but it change only desktop view.
if i open that page in mobile table th not properly set.
i have also try col-xs-2 to fix th but it is not work
<div class="form-group col-lg-12 col-md-12 col-xs-12">
<div class="col-lg-12 col-md-12 col-xs-12 col-md-offset-1">
<div class="row" >
<div class = "table-responsive">
<table class="table table-hover table-striped">
<thead>
<tr class="info">
<th class="col-md-2 col-xs-2" > No</th>
<th class="col-md-4 col-xs-4">Dish Name</th>
<th class="col-md-2 col-xs-2"> Size</th>
<th class="col-md-2 col-xs-2">Prize</th>
<th class="col-md-2 col-xs-2">Order</th>
</tr>
</thead>
<tbody>
<tr title="Order Chicken Kadhai">
<td >1</td>
<td >Chicken Kadhai</td>
<td >Full</td>
<td >150/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >2</td>
<td >Chicken Roast</td>
<td >Full</td>
<td >250/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
<tr>
<td >3</td>
<td >Chicken Tandori</td>
<td >Full</td>
<td >350/-</td>
<td ><input type="button" class="btn btn-info" value="ORDER"> </td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
how can we set th to responsive table
From comments:
columns are not made for use in tables. .table-responsive adjusts
itself according to the content.
use this code might be help for you
<div class="table-responsive">
<table class="table">
...
</table>
</div>
write <class=".table-responsive>" instead of class=<class="table-responsive>"
I would like to have all my boxes the same height
I used the CSS display: flex and it works fine for the first block but not his child
It works fine on Firefox but not on chrome
I found the row-eq-height class on getbootstrap but it isn't better on chrome
my page on chrome
my page on firefox
I have a div class row-eq-height then a col-md-4 and a panel
The panel height don't want to change
the code :
<div class="row-eq-height">
<div class="col-md-4">
<div class="panel panel-default no-padding server-box">
<!-- Default panel contents -->
<div class="panel-heading title-box">Regrowth</div>
<!-- Table -->
<table class="table server-table">
<tbody>
<tr>
<th>Adresse IP</th>
<td>#</td>
</tr>
<tr>
<th>Joueurs en ligne</th>
<td class="progress-bar-wrap">
<div>
<span style="width: 0%;"></span>
<span class="progress-bar-content">0
/50</span>
</div>
</td>
</tr>
<tr>
<th>Statut</th>
<td><img src="#" alt="status"></td>
</tr>
<tr>
<th>Ms/Tps</th>
<td class="good-tps">2.8 ms / 20 tps</td>
</tr>
<tr class="heads-tr">
<td class="heads-td">
<div class="heads">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default no-padding server-box">
<!-- Default panel contents -->
<div class="panel-heading title-box">InfinityHard</div>
<!-- Table -->
<table class="table server-table">
<tbody>
<tr>
<th>Adresse IP</th>
<td>#</td>
</tr>
<tr>
<th>Joueurs en ligne</th>
<td class="progress-bar-wrap">
<div>
<span style="width: 6%;"></span>
<span class="progress-bar-content">3
/50</span>
</div>
</td>
</tr>
<tr>
<th>Statut</th>
<td><img src="#" alt="status"></td>
</tr>
<tr>
<th>Ms/Tps</th>
<td class="#">7.1 ms / 20 tps</td>
</tr>
<tr class="heads-tr">
<td class="heads-td">
<div class="heads">
<img src="#" alt="Melkutus" data-toggle="tooltip"
data-trigger="hover" data-placement="bottom" title="Melkutus">
<img src="#"
data-toggle="tooltip" data-trigger="hover" data-placement="bottom"
title="FortunateTrollz">
<img src="#" alt="Asseo" data-toggle="tooltip"
data-trigger="hover" data-placement="bottom" title="Asseo">
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
and the css
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
.panel-container .server-box {
height: 100%;
}
thanks to people who will understand and answer me !