I would like to move the green and red arrow to the left of the numerical value.
I tried:
.arrowDown {
position: relative;
padding-right: 15px;
}
It doesn't do what I want, the arrows don't move to the right.
.arrowUp,
.arrowDown {
position: relative;
padding-right: 15px;
}
.arrowUp:before,
.arrowDown:before {
content: "";
border-style: solid;
border-width: 5px 5px;
position: absolute;
left: 8.5%;
transform: translate(-50%, -50%);
}
.arrowUp:before {
border-color: transparent transparent #0dff00 transparent;
top: 37%;
}
.arrowDown:before {
border-color: #ff0000 transparent transparent transparent;
top: 60%;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="home-content container ">
<h1 class="text-center pt-5 pb-3">Indices boursiers</h1>
<div class="row pt-3 container">
<table class="table table-bordered">
<thead class="thead-light">
<tr class="text-center">
<th scope="col">Indice</th>
<th scope="col">Place</th>
<th scope="col">Cours</th>
<th scope="col">Variation</th>
<th scope="col">Date et heure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-center">AED / EUR</th>
<td>Euronext Amsterdam</td>
<td class="text-end">1 134,65</td>
<td class="text-end">
<div class="arrowUp"></div>0,31 %</td>
<td class="text-center">08/11 - 10:04</td>
</tr>
<tr>
<th scope="row" class="text-center">ARS / EUR</th>
<td>Euronext Amsterdam</td>
<td class="text-end">1 134,65 </td>
<td class="text-end">
<div class="arrowDown"></div>-0.15 %</td>
<td class="text-center">08/11 - 10:04</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It's because there is also a left property set on .arrowUp:before, .arrowDown:before try altering the left value and your arrow moves! Or remove the left property and replace it with right.
Like these values for example:
.arrowUp,
.arrowDown {
position: relative;
padding-right: 15px;
}
.arrowUp:before,
.arrowDown:before {
content: "";
border-style: solid;
border-width: 5px 5px;
position: absolute;
/* Changed this */
right: 50px;
top: 10px;
transform: translate(-50%, -50%);
}
.arrowUp:before {
border-color: transparent transparent #0dff00 transparent;
}
.arrowDown:before {
border-color: #ff0000 transparent transparent transparent;
/* Added this */
top: 15px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="home-content container ">
<h1 class="text-center pt-5 pb-3">Indices boursiers</h1>
<div class="row pt-3 container">
<table class="table table-bordered">
<thead class="thead-light">
<tr class="text-center">
<th scope="col">Indice</th>
<th scope="col">Place</th>
<th scope="col">Cours</th>
<th scope="col">Variation</th>
<th scope="col">Date et heure</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" class="text-center">AED / EUR</th>
<td>Euronext Amsterdam</td>
<td class="text-end">1 134,65</td>
<td class="text-end">
<div class="arrowUp"></div>0,31 %</td>
<td class="text-center">08/11 - 10:04</td>
</tr>
<tr>
<th scope="row" class="text-center">ARS / EUR</th>
<td>Euronext Amsterdam</td>
<td class="text-end">1 134,65 </td>
<td class="text-end">
<div class="arrowDown"></div>-0.15 %</td>
<td class="text-center">08/11 - 10:04</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Related
Brief introduction:
with my attempts I have reached an acceptable result
to a specific table cell I set inline the (in the screenshots below it is the third last TH)
<th style="position:relative;">Column Name</th>
then inside the cell I have positioned my DIV
<th style="position:relative;"><div id="myDiv" style="position:relative;">Line 1 - medium length<br>Line2 - John</div></th>
EDIT: as requested I post the significant code
the DIV CSS
#provDiv{ /** the DIV CSS */
position: absolute;
top: 0;
right: 0;
width: auto;
background: greenyellow;
text-align: right;
}
the involved cell,
<th data-dbrow="device" scope="col"
style="position:relative; width: 10%">
<div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
</th>
What it happen is that (I'd say "obviously") the DIV long text will wrap, because the DIV will have as maximum width -> the table column's width, this using width: auto;
while if I set width: 300px the DIV width is really 300px
with fixed width, I have the DIV larger than the column width,
but then the div is ALWAYS large 300px, despite the content,
so if DIV innerText is just 5 chars like "hello", I have a laaaaarge DIV quite awful to see.
Well the question is:
how to have the DIV WIDTH that adapts to the text line length, without using a fixed width?
please note that I must use bootstrap 5
if it can help in this case, I'm available to use flexbox, but I haven't studied it yet
These are my tests
current result with auto and two text lines long text
worse result with fixed width and short text
1th wanted result
2nd wanted result
Check the classes = parent, myDiv. This is a mix of using table and flexbox layout
#customers {
font-family: Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 100%;
}
#customers td, #customers th {
border: 1px solid #ddd;
height: 35px;
}
#customers tr:nth-child(even){background-color: #f2f2f2;}
#customers tr:hover {background-color: #ddd;}
#customers th {
text-align: left;
background-color: #04AA6D;
color: white;
}
/* Check the styles below*/
.parent {
display: flex;
align-items: center;
}
.myDiv {
background-color: red;
height: 100%;
width: fit-content;
padding: 0 10px;
margin-left: auto;
display: flex;
align-items: center;
}
<table id="customers">
<thead>
<tr>
<th class="parent">
Company
<div class="myDiv">Hello World</div>
</th>
<th>Contact</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</tbody>
</table>
And you can hide large text and show dots instead if the width of myDiv is more than 300px:
.myDiv {
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
EDIT: Solution for your code
Check:
#provDiv{
position: absolute;
top: 0;
right: 0;
width: fit-content;
padding: 0 5px;
background: greenyellow;
text-align: right;
/*ADDED*/
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="/favicon.ico" />
<link rel="icon" type="image/png" href="/favicon-32x32.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<style>
#provDiv{
position: absolute;
top: 0;
right: 0;
width: fit-content;
padding: 0 5px;
background: greenyellow;
text-align: right;
text-overflow: ellipsis;
overflow: hidden;
max-width: 300px;
white-space: nowrap;
}
</style>
<title>Title</title>
</head>
<body>
<div class="container-fluid">
<div class="d-flex flex-wrap">
<div class="col-xl-6 col-sm-12">
<div class="d-flex justify-content-start">
<h1 class="p-1">Calls</h1>
<p id="provincie"></p>
</div>
</div>
<div class="col-xl-6 col-sm-12">
<div class="d-flex flex-wrap justify-content-end">
<div>
<button class="btn btn-primary m-3" id="AggiungiRiga" type="submit" value="Submit" >+ Riga</button>
</div>
<div>
<button class="btn btn-danger m-3" id="EliminaRiga" type="submit" value="Submit" >- Riga</button>
</div>
<div>
<button class="btn btn-success m-3" id="SalvaRiga" type="submit" value="Submit" >Salva</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table style="min-width:1000px;" class="table table-striped table-hover table-bordered text-center" id="tabella">
<thead>
<tr>
<th data-dbrow="riga" scope="col" style="width: 5%">#</th>
<th data-dbrow="id" scope="col" style="width: 5%">ID</th>
<th data-dbrow="nome" scope="col" style="width: 30%">Nome</th>
<th data-dbrow="tel" scope="col" style="width: 11%">Telefono</th>
<th data-dbrow="mail" scope="col" style="width: 29%">Email</th>
<th data-dbrow="device" scope="col" style="position:relative; width: 10%">
<select id="select1" class="form-select form-select-sm">
<option value="$" selected disabled>- Text 1 -</option>
<option value="val1">Text 2</option>
<option value="val2">Text 3</option>
<option value="val2">Text 4</option>
</select>
<div id="provDiv">Line 1 - medium length<br>Line 2 - John</div>
</th>
<th data-dbrow="iscli" scope="col" style="width: 5%">È Cli</th>
<th data-dbrow="prov" scope="col" class="cellaProv" style="width: 5%">Prov</th>
</tr>
</thead>
<tbody id="table1bd">
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
<tr>
<th>some text</th>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
<td>some text</td>
<td contenteditable="true">some text</td>
<td contenteditable="true">some text</td>
</tr>
</tbody>
</table>
</div>
</div>
<pre></pre>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
</body>
</html>
I'm trying to align the column heading with the rows below it but the column headings appear slightly to the right. I tried removing margin and removing the overflow auto from the row below the heading but that does not work. How can align the column heading with the rows below it? Thank you.
full code at this codepen.
These columns appear slightly to the right
<div class="row" style="background-color: yellow;">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
</div>
These appear correctly.
<div id="data-row">
<div class="row" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder" style="width: 100%;">
<div class="col-4">{{birds.ID}}</div>
<div class="col-4">{{birds.Name}}</div>
<div class="col-4">{{birds.Type}}</div>
</div>
</div>
You need no-gutters on both the row with the headings and the rows with the data and you don't need the width: 100% on the #data-row.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js"></script>
<style>
body {
margin: 0 auto;
}
a {
text-decoration: none;
}
.container {
border: 1px solid black;
}
.content {
padding: 5px;
width: 100%;
}
#data-row {
/*width: 100%; */
min-height: 200px;
max-height: 500px;
overflow: auto;
}
.row:nth-child(even) {
background: #CCC
}
.row:nth-child(odd) {
background: #FFF
}
.row .section-header {
padding: 5px !important;
background-color: #7C9DB9 !important;
}
.header-span {
color: #fff;
margin-right: .7em;
cursor: pointer;
font-size: 1.5em;
}
.span-active {
border-bottom: solid 1px #fff;
}
.col-4 {
border: solid 1px red;
}
.overflow-y {
overflow-y: scroll;
}
</style>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
<div class="col-12">
<span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
{{tab.label}}
</span>
</div>
</div>
<label>Search: <input ng-model="searchText"></label>
<div class="row no-gutters overflow-y" style="background-color: yellow;">
<div class="col-4"><span ng-click="sortBy('ID')">ID <i id="ID" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Name')">Bird Name <i id="Name" class="fa fa-caret-down"></i></span></div>
<div class="col-4"><span ng-click="sortBy('Type')">Type of Bird <i id="Type" class="fa fa-caret-down"></i></i></span></div>
</div>
<div id="data-row">
<div class="row no-gutters overflow-y" ng-repeat="birds in list | filter:filterText | orderBy:sortField:reverseOrder">
<div class="col-4">{{birds.ID}}</div>
<div class="col-4">{{birds.Name}}</div>
<div class="col-4">{{birds.Type}}</div>
</div>
</div>
</div>
</div>
Another way to go would be to use a table rather than rows and columns. Bootstrap-table is an extension can create a table for you where the columns align and you can have a scrollbar to scroll through the data. Bootstrap-table can also handle the search function and sorting the table by a column. You can have the table either hard coded into your page or you can build the table from a JSON file.
Bootstrap-table is being actively maintained, but they are a few version behind on Bootstrap 4 (they’re running 4.3.1 rather than 4.6.0).
I have replaced Bootstrap-table’s arrows for sorting columns as theirs (I believe) lack sufficient contrast).
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.18.3/dist/bootstrap-table.min.js"></script>
<style>
.bootstrap-table {
margin-bottom: 1rem;
}
.bootstrap-table .fixed-table-container .table thead th .th-inner {
padding: 0.25rem;
}
.table td,
.table th {
padding: 0 0.25rem;
}
.bootstrap-table .fixed-table-container .table thead th .both {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100' fill='%23000000' opacity='0.56'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
.bootstrap-table .fixed-table-container .table thead th .asc {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='50,10 70,45 30,45'/%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
.bootstrap-table .fixed-table-container .table thead th .desc {
background-image: url("data:image/svg+xml; charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23000000' opacity='0.69'%3E%3Cpolygon points='30,55 70,55 50,90' /%3E%3C/svg%3E");
background-size: 1.1875rem, 1.1875rem;
}
</style>
<div ng-app="myApp" ng-controller="myController">
<div class="container">
<div class="row section-header" style="padding: 5px; background-color: #7C9DB9">
<div class="col-12">
<span class="header-span" ng-repeat="tab in tabs" ng-click="update($index, tab.value)" ng-class="{'span-active': tab.active}">
{{tab.label}}
</span>
</div>
</div>
<label>Search: <input ng-model="searchText"></label>
<table class="table table-bordered mb-5" data-toggle="table" data-search="true" data-height="468" data-show-columns="true">
<thead>
<tr>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">Bird Name</th>
<th data-field="type" data-sortable="true">Type of Bird</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>2</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<th>3</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>4</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>5</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>6</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>7</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>8</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>9</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>10</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>11</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>12</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>13</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>14</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>15</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>16</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>17</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>18</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>19</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>20</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>21</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>22</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>23</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>24</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>25</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>26</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>27</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>28</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>29</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>30</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
<tr>
<th>31</th>
<td>Eurasian Collared-Dove</td>
<td>Hawk</td>
</tr>
<tr>
<th>32</th>
<td>Bald Eagle</td>
<td>Sparrow</td>
</tr>
<tr>
<th>33</th>
<td>Cooper's Hawk</td>
<td>Sparrow</td>
</tr>
<tr>
<th>34</th>
<td>Bell's Sparrow</td>
<td>Sparrow</td>
</tr>
<tr>
<th>35</th>
<td>Mourning Dove</td>
<td>Dove</td>
</tr>
<tr>
<th>36</th>
<td>Rock Pigeon</td>
<td>Dove</td>
</tr>
<tr>
<th>37</th>
<td>Abert's Towhee</td>
<td>Sparrow</td>
</tr>
<tr>
<th>38</th>
<td>Brewer's Sparrow</td>
<td>Hawk</td>
</tr>
<tr>
<th>39</th>
<td>Canyon Towhee</td>
<td>Hawk</td>
</tr>
<tr>
<th>40</th>
<td>Black Vulture</td>
<td>Dove</td>
</tr>
</tbody>
</table>
</div>
</div>
I want to create a dynamically spinner in a table tbody bootstrap 4.
I have tried this way:
HTML
<div class="container mt-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div>
<span class="table-title">table</span>
</div>
<hr>
<div class="table-responsive text-nowrap">
<table id="contact-list" class="table table-striped table-bordered table-sm bstable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
CSS
.bstable tbody {
position: relative;
}
.bstable tbody .overlay-spinner {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
}
JS
var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>;
$( '.bstable' ).find( 'tbody' ).append( '<div class="overlay-spinner text-center">' + s + '</div>' );
With firefox the spinner is correctly shown in tbody, while with the other browsers (chrome, edge, explorer) the spinner is shown above the table.
See my JSFiddle
Unfortunately I can not understand where the problem is.
Can you help me to solve my problem?
Thanks
please add the spinner to the div around your table and not to the table body in JS. Then adjust it with top 50% and left 50% and reduce this alignment by the height and width of the spinner to adjust it right in the middle. after that i removed the bottom margin from the tables parent div to get the spinner exactly in the middle of the table.
var s = '<div class="spinner-grow text-primary spinner-grow-sm mt-2"><span class="sr-only">Loading...</span></div>';
$('.table-responsive').append('<div class="overlay-spinner text-center">' + s + '</div>');
table.table {
margin-bottom: 0;
}
.table-responsive {
position: relative;
margin-bottom: 1rem;
}
.overlay-spinner {
position: absolute;
top: 50%;
left: 50%;
margin-top: -1rem;
margin-left: -1rem;
z-index: 10;
background-color: rgba(0, 0, 0, 0);
/*dim the background*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container mt-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div>
<span class="table-title">TABLE</span>
</div>
<hr>
<div class="table-responsive text-nowrap">
<table id="contact-list" class="table table-striped table-bordered table-sm bstable">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<td>a</td>
<td>b</td>
<td>c</td>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Find below solution.
I've done it with 'tr' tag for wrapper element of the loader.
Loader stays vertically in center dispute of rows added.
But you need to explicitly set colspan when ever new column is added or removed, to keep the loader horizontally center.
Replace 'loading' text with your loader animation.
table {
position: relative;
}
tbody {
background-color: yellow;
position: relative;
}
.loading {
position: absolute;
background: antiquewhite;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
height: fit-content;
width: fit-content;
}
<table>
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Click</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr class="loading">
<td colspan="3">
loading
</td>
</tr>
</tbody>
</table>
.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" ></td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>
I'm trying to make my images look like this: http://designcollection.in/codecanyon/table-record/table-design-7.html?ref=designcollection
But so far I've managed to make the images all the same size. The user can input any image size I just want to make the image all the same size and rounded.
https://i.gyazo.com/4eb460be09fea8e0eef939fb9ae4bb0f.png
I'm using bootstrap and I tried this css:
.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
}
Your property height: 50px; is being override by bootstrap's .img-responsive property, giving height: auto;. Either use a higher specificity in your code, or simply load your styles after the bootstrap css, giving the same rules.
To prove my case, change the property to height: 50px !important; and see that is does work. I'm not saying it's a good practice to use !important, it's just a quick way to show you that it's a specificity issue...
Please try snippet code:
.table .table-img {
width: 50px;
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg" ></td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>
If maintaining image aspect ratio is important, consider wrapping the img element in a containing element as demonstrated in the embedded code snippet below.
Code Snippet Demonstration:
.table-img {
height: 50px;
width: 50px;
overflow: hidden;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 100%;
}
.table-img img {
max-height: 50px;
max-width: none;
min-width: 100%;
min-height: 50px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<table class="table center-aligned-table table-striped" id="dataTable" cellspacing="0" width="100%">
<thead>
<tr>
<th class="text-center text-primary">Image</th>
<th class="text-center text-primary">Name</th>
<th class="text-center text-primary">Username</th>
<th class="text-center text-primary">Permissions</th>
<th class="text-center text-primary">Status</th>
</tr>
</thead>
<tbody>
<tr class="text-center">
<td><img class="img-responsive img-rounded table-img" src="data:image/png;base64, null"></td>
<td>John Smith</td>
<td>admin</td>
<td>Administrator</td>
<td><label class="badge badge-success">Online</label></td>
</tr>
<tr class="text-center">
<td>
<div class="table-img"> <!-- new containing element to wrap img -->
<img class="img-responsive img-rounded" src="https://cloud.netlifyusercontent.com/assets/344dbf88-fdf9-42bb-adb4-46f01eedd629/68dd54ca-60cf-4ef7-898b-26d7cbe48ec7/10-dithering-opt.jpg">
</div>
</td>
<td>asdajdaslf</td>
<td>admin50</td>
<td>Administrator</td>
<td><label class="badge badge-danger">Offline</label></td>
</tr>
</tbody>
</table>
The obvious drawback to this being that landscape orientated images will be better supported than portrait orientated images, but depending on your situation, that may be negligible.
Just add !important to your css:
CSS:
.table-img {
height: 50px !important;
display: block;
margin-left: auto;
margin-right: auto;
}
Because this value is overiden by img-responsive class...
add border-radius: 50%; to make it circular
.table-img {
height: 50px;
display: block;
margin-left: auto;
margin-right: auto;
border-radius: 50%;
}
or
.img-rounded {
border-radius: 50%!important;
height: 30px;
}
style sheet class definition
.table-img {
height: 50px;
width : 50px;
border-radius: 50%;
display: block;
margin-left: auto;
margin-right: auto;
}
then call in html file like this
<table>
<tr><td>
<img class='table-img' src='yourimage.jpg' />
</td></tr>
</table>
I've got a Table with % width and tds with % width. Also table-layout: fixed.
I want the tds height to be 1:1 ratio to %-width.
I can't use td:before {content: ""; display: block; margin-top: 100%;} because that would throw off the positioning of td content and I can't edit the html. So i used it in tr, which leads to the actual problem of the :before being displayed as table cell.
Any ideas on how to fix that or other ways to get the 1:1 ratio?
Here is a fiddle: jsfiddle
And here the internal code snippet, didn't find where to enable SCSS.
table {
width: 100%;
line-height: 31px;
table-layout: fixed;
thead tr: last-child th {
background: blue;
color: white;
&: first-child {
border-top-left-radius: 4px;
}
&:last-child {
border-top-right-radius: 4px;
}
}
tbody {
text-align: center;
td {
width: 14.2857142857%;
position: relative;
box-shadow: inset 1px -1px 0px 0px gray;
&: last-child {
box-shadow: inset 1px -1px 0px 0px gray, inset -1px 0px 0px 0px gray;
}
& .header {
position: absolute;
top: 0.2vw;
left: 0.2vw;
line-height: 11px;
padding: 8px;
font-size: 12px;
}
& .event {
background: blue;
border-radius: 4px;
margin: 35px 4px 4px 4px;
& ~ .event {
margin: 4px;
}
& a:link,
& a:visited,
& a:hover,
& a:active {
color: white;
}
& a:hover {
text-decoration: underline;
}
}
}
.today .header {
color: white;
background: blue;
}
tr {
&: nth-child(odd) .days: nth-child(odd) {
background: gray;
}
&:nth-child(even) .days:nth-child(even) {
background: gray;
}
&:before {
content: "";
display: block;
margin-top: 100%;
}
}
}
}
<table class="calendar">
<thead>
<tr>
<th colspan="2" class="head previous"> </th>
<th colspan="3" class="head current">October 2014</th>
<th colspan="2" class="head next"> </th>
</tr>
<tr>
<th class="label col_first">Mon<span>day</span>
</th>
<th class="label">Tue<span>sday</span>
</th>
<th class="label">Wed<span>nesday</span>
</th>
<th class="label">Thu<span>rsday</span>
</th>
<th class="label">Fri<span>day</span>
</th>
<th class="label weekend">Sat<span>urday</span>
</th>
<th class="label col_last weekend">Sun<span>day</span>
</th>
</tr>
</thead>
<tbody>
<tr class="week_0 first">
<td class="days empty col_first">
<div class="header"> </div>
</td>
<td class="days empty">
<div class="header"> </div>
</td>
<td class="days">
<div class="header">1</div>
</td>
<td class="days">
<div class="header">2</div>
</td>
<td class="days">
<div class="header">3</div>
</td>
<td class="days weekend">
<div class="header">4</div>
</td>
<td class="days weekend col_last">
<div class="header">5</div>
</td>
</tr>
<tr class="week_1">
<td class="days col_first">
<div class="header">6</div>
</td>
<td class="days">
<div class="header">7</div>
</td>
<td class="days">
<div class="header">8</div>
</td>
<td class="days">
<div class="header">9</div>
</td>
<td class="days today">
<div class="header">10</div>
</td>
<td class="days weekend">
<div class="header">11</div>
</td>
<td class="days active weekend col_last">
<div class="header">12</div>
<div class="event cal_1 upcoming"> Rauchen
</div>
<div class="event cal_1 upcoming"> Toilette
</div>
<div class="event cal_1 upcoming"> Spülen
</div>
<div class="event cal_1 upcoming"> Essen
</div>
<div class="event cal_1 upcoming"> Schlafen
</div>
</td>
</tr>
<tr class="week_2">
<td class="days col_first">
<div class="header">13</div>
</td>
<td class="days">
<div class="header">14</div>
</td>
<td class="days">
<div class="header">15</div>
</td>
<td class="days">
<div class="header">16</div>
</td>
<td class="days">
<div class="header">17</div>
</td>
<td class="days weekend">
<div class="header">18</div>
</td>
<td class="days weekend col_last">
<div class="header">19</div>
</td>
</tr>
<tr class="week_3">
<td class="days col_first">
<div class="header">20</div>
</td>
<td class="days">
<div class="header">21</div>
</td>
<td class="days">
<div class="header">22</div>
</td>
<td class="days">
<div class="header">23</div>
</td>
<td class="days">
<div class="header">24</div>
</td>
<td class="days weekend">
<div class="header">25</div>
</td>
<td class="days weekend col_last">
<div class="header">26</div>
</td>
</tr>
<tr class="week_4 last">
<td class="days col_first">
<div class="header">27</div>
</td>
<td class="days">
<div class="header">28</div>
</td>
<td class="days">
<div class="header">29</div>
</td>
<td class="days">
<div class="header">30</div>
</td>
<td class="days">
<div class="header">31</div>
</td>
<td class="days empty weekend">
<div class="header"> </div>
</td>
<td class="days empty weekend col_last">
<div class="header"> </div>
</td>
</tr>
</tbody>
</table>
Ok I did it like this now:jsfiddle
Put the before in the td and just gave the first .event -80% margin top.
& .event {
margin: -80% 4px 4px 4px;
td:before {
content: "";
display: block;
margin-top: 100%;
}