I have a Flask application that takes a bunch of input from the users, processes it and generates a table/matrix of values.
I want to display this table to the user with different colors for different cells. At the time of the table generation I know what color I want the cell to be.
I am using Bootstrap4. Can this be done using Bootstrap?
The class attribute can be used in the table row to get the required colors.
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr class="active">
<td>ABC</td>
<td>10</td>
</tr>
<tr class="danger">
<td>DEF</td>
<td>20</td>
</tr>
<tr class="info">
<td>GHI</td>
<td>30</td>
</tr>
<tr class="success">
<td>JKL</td>
<td>40</td>
</tr>
<tr class="warning">
<td>MNO</td>
<td>50</td>
</tr>
</tbody>
</table>
In Bootstrap 4, you can give color to the table rows by adding bg classes to the <tr> elements like;
<tr class="bg-success">...</tr>
<tr class="bg-warning">...</tr>
<tr class="bg-danger">...</tr>
Take a look at bootstrap documentation of tables which explains it in detail
This is the way to add color on cells
<!doctype html>
<html lang="en">
<head>
<title>Table Color</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="table-hover">
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def#somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe#example.com</td>
</tr>
<tr class="table-success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="table-danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="table-info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
<tr class="table-warning">
<td>Warning</td>
<td>Refs</td>
<td>bo#example.com</td>
</tr>
<tr class="table-active">
<td>Active</td>
<td>Activeson</td>
<td>act#example.com</td>
</tr>
<tr class="table-secondary">
<td>Secondary</td>
<td>Secondson</td>
<td>sec#example.com</td>
</tr>
<tr class="table-light">
<td>Light</td>
<td>Angie</td>
<td>angie#example.com</td>
</tr>
<tr class="table-dark text-dark">
<td>Dark</td>
<td>Bo</td>
<td>bo#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
More about table
table documentation bootstrap 4
Related
I have a table that implements tablesaw-stack mode. It works fine on Google Chrome, Mozilla Firefox, Internet Explorer, Edge until recently I found out that the tablesaw layout is distorted on Safari/iOS Safari. I have tried with the latest version of tablesaw and Safari but the layout remains distorted.
Codepen
<div class="container">
<table class="tablesaw" data-tablesaw-mode="stack">
<thead>
<tr>
<th>Movie Title</th>
<th>Rank</th>
<th>Year</th>
<th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th>Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">Avatar</td>
<td>1</td>
<td>2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title">Titanic</td>
<td>2</td>
<td>1997</td>
<td>88%</td>
<td>$2.1B</td>
</tr>
</tbody>
</table>
</div>
Result on Safari:
PS: I couldn't use code snippet. Please click on the Codepen link.
Update:
I have found out that the the layout works with declared <!DOCTYPE html>. However, once I declare that, the webpage does not load my css content. I have tried:
Add type="text/css" -> does not work
Add rel="stylesheet" -> does not work
Add missing px/% at the external css file -> does not work
<div class="container">
<table class="tablesaw" data-tablesaw-mode="stack">
<thead>
<tr>
<th>Movie Title</th>
<th>Rank</th>
<th>Year</th>
<th><abbr title="Rotten Tomato Rating">Rating</abbr></th>
<th>Gross</th>
</tr>
</thead>
<tbody>
<tr>
<td class="title">Avatar</td>
<td>1</td>
<td>2009</td>
<td>83%</td>
<td>$2.7B</td>
</tr>
<tr>
<td class="title">Skyfall</td>
<td>9</td>
<td>2012</td>
<td>92%</td>
<td>$1.1B</td>
</tr>
<tr>
<td class="title">Transformers: Age of Extinction</td>
<td>10</td>
<td>2014</td>
<td>18%</td>
<td>$1.0B</td>
</tr>
</tbody>
</table>
</div>
I have a page with a footer that repeats on every page. The main content of the page is a long table of multiple pages.
I need the number of rows per page to be fixed so that it does not overlap my page footer when printing the page.
I have tried page-break-inside: avoid; on the footer but it does not work.
I am using bootstrap of if that helps.
<html>
<link rel="stylesheet" href="/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/css/style.css">
<body style="padding-top:20px">
<div class="container">
<div class="row">
Header Section
</div>
<br>
<table class="table table-striped table-bordered">
<thead>
<tr style="background-color:yellow">
<th scope="col">S.No</th>
<th scope="col">Item Description</th>
<th scope="col">Qty</th>
<th scope="col">Unit Price</th>
<th scope="col">Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>CAT 6 Outlet - Optronics CAT6 Single Outlet( Connector + Module + Faceplate)</td>
<td>40</td>
<td>30</td>
<td>5000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Patch Panel - Optronics 24-Port Patch Panel Loaded</td>
<td>10</td>
<td>20</td>
<td>2000</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Brush Panel - Optronics Cable Manager Brush</td>
<td>500</td>
<td>10</td>
<td>20000</td>
</tr>
<tr>
<td></td>
<td>Grand Total (AED)</td>
<td></td>
<td></td>
<td>501000.00</td>
</tr>
</tfoot>
</table>
{{!-- Page Footer --}}
<div class="fixed-bottom">
<hr>
**** FOOTER SECTION ****
</div>
</div>
</body>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
</html>
Why is the following HTML code not producing the table I would expect?
Some of my cells are being skipped over. I want the following table (https://jsfiddle.net/t4q801s7/1/). The only difference being I want to use rowspan (e.g. Johnny and San Diego won't be repeated).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Johnny</td>
<td>Bay Area</td>
</tr>
<tr>
<td>New York</td>
</tr>
<tr>
<td rowspan="2">San Diego</td>
</tr>
<tr>
<td>Zack</td>
</tr>
</tbody>
</table>
Table cells have vertical-align:middle by default, so if you don't want that, you will have to change that in the stylesheet.
(For some unfathomable reason, we seem to need !important here. Sorry.)
table, td, th {
vertical-align: baseline !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>City</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Johnny</td>
<td>Bay Area</td>
</tr>
<tr>
<td>New York</td>
</tr>
<tr>
<td rowspan="2">San Diego</td>
</tr>
<tr>
<td>Zack</td>
</tr>
</tbody>
</table>
The problem, however, as you can see, is that with a table cell with a height of three rows, it doesn't have the contiguous lines between the rows. Table cells don't have borders inside of them, and table rows can't have borders of their own! So you will have to think about a workaround for that. Again, sorry.
i'm using Bootstrap version 3.3.7 with virtual studio 2015. the problem is when i want use Contextual Classes table it shows all the rows color except the Blue color 'info'.
Now i try to update but it shows 3.3.7 is the last version package.
Any one can help to fix that.
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
this is just example from my code.
To get what you want you need to set class="table" for table:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table">
<tr class="success">
<td>Success</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr class="danger">
<td>Danger</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr class="info">
<td>Info</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</table>
this is my code
#{
ViewBag.Title = "Details";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<table class="table table-bordered">
<thead>
<tr class="active">
<th>Activtät</th>
<th>Läuft?</th>
</tr>
</thead>
<tbody>
<tr class="info">
<td>#Html.DisplayNameFor(model => model.systemtyp)</td>
<td>#Html.DisplayFor(model => model.systemtyp)</td>
</tr>
<tr class="info">
<td>#Html.DisplayNameFor(model => model.CadWorkerlauftstartet)</td>
<td>#Html.DisplayFor(model => model.CadWorkerlauftstartet)</td>
</tr>
<tr class="danger">
<td>#Html.DisplayNameFor(model => model.PublizierWarteschlangeuberprufen)</td>
<td>#Html.DisplayFor(model => model.PublizierWarteschlangeuberprufen)</td>
</tr>
The photo shows , are working
First i setup jquery, bootstrap libs and then include footable.min.js, footable.paging.js and footable.sorting.min.js files and also setup stylesheets for that.
So, i can't to use sorting as well as pagination on it.
i am not getting any kind of error in console. whereas i able to used data-breakpoints for various devices and it works for me. i don't know how one features is working and another is not. please help me.
html file
<div class="container-fluid">
<div class="page-header">
<table class="footable table table-hover" data-page-size="3" data-page-navigation=".pagination">
<thead>
<tr>
<th data-toggle="true">Name</th>
<th data-breakpoints="xs sm">Birthday</th>
<th data-breakpoints="xs">City</th>
<th>Donation</th>
</tr>
</thead>
<tbody>
<tr>
<td>Sade Morgan</td>
<td>10/03/1990</td>
<td>Ede</td>
<td>$4,653</td>
</tr>
<tr>
<td>Knox Sutton</td>
<td>06/29/1966</td>
<td>Bressoux</td>
<td>$4,563</td>
</tr>
<tr>
<td>Rooney Preston</td>
<td>12/12/2002</td>
<td>Patalillo</td>
<td>$3,222</td>
</tr>
<tr>
<td>Fulton Wilkerson</td>
<td>01/24/1986</td>
<td>Haren</td>
<td>$2,841</td>
</tr>
<tr>
<td>Azalia Long</td>
<td>11/21/1988</td>
<td>Gressoney-Saint-Jean</td>
<td>$4,631</td>
</tr>
<tr>
<td>Erich Burris</td>
<td>10/26/1966</td>
<td>Pulle</td>
<td>$2,519</td>
</tr>
<tr>
<td>Kadeem Sharpe</td>
<td>08/24/1976</td>
<td>Ekeren</td>
<td>$1,440</td>
</tr>
<tr>
<td>Rose Wilcox</td>
<td>11/05/2003</td>
<td>Aparecida de Goiânia</td>
<td>$2,188</td>
</tr>
<tr>
<td>Hu Gibson</td>
<td>02/18/1994</td>
<td>Raigarh</td>
<td>$4,286</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="5" class="text-center">
<ul class="pagination"></ul>
</td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function() {
$(".footable").footable();
});
</script>