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>
Related
I have attached this photo to show you what the question is asking with correct formatting.
Click here to see my output with the code used below.
<h1>7.
<table>
<tr>
<th colspan="3">1</th>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
</h1>
I used the rowspan and colspan as instructed, and yet my table is still missing the larger spaces as the example shows is needed, so I am looking for guidance on what I am missing. The numbers are aligned correctly, just missing the spaces. I know the code should seem fine, but the program checker is saying it's wrong.
<!DOCTYPE html>
<html>
<head>
<style>
table.td {
bold: normal;
}
</style>
</head>
<body>
<h1>7</h1>
<table style="text-align:center;">
<tr >
<th colspan="3"><h1>1</h1></th>
</tr>
<tr>
<td rowspan="2"><h1>2</h1></td>
<td><h1>3</h1></td>
<td><h1>4</h1></td>
</tr>
<tr>
<td><h1>5</h1></td>
<td><h1>6</h1></td>
</tr>
</table>
</body>
</html>
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
I've inherited a web application from about 2005 that has lots of table-styling in it, see https://jsfiddle.net/6t7r1fma
<table style="height:50px">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
The issue is that I want the inner table to be as large as I want, but contained in the overflow div which can be scrolled vertically. It works in Chrome but not in Firefox (less important) and IE (more important). What's happening is that the overflow div is taking the height of the child table instead of the parent table, and the result is that the inner table is displayed in its entirety.
Any thoughts? Rewriting the HTML is not really an option, so hopefully there's a CSS solution.
Unfortunately, the way tables work can be summed up by: they size themselves around content. The only solution you have is to pass the max-height from the outer table onto the <div> inside its cell.
If you'd rather do that dynamically, without changing your markup (which would be the right way to go), you could:
hide the contents of your table entirely, using CSS and let the cell get normal size
on page load (after the table was added to DOM and rendered), get the height of the parent <table> and place it as max-height on the <div> contained in your <td>. Of course, this can only be done in javascript.
Besides the above, the only other option you have is placing the max-height on the div inside the td directly (which is what the solutions below do using javascript).
Note I added an id on general principles, to contain it, but as long as you know what you're doing, and this doesn't affect anything else, you don't really need it. Proof of concept:
var divs = document.querySelectorAll('#fix>tbody>tr>td>div');
[].forEach.call(divs, function(div){
div.style.maxHeight = div.parentNode.clientHeight + 'px';
div.style.display = 'block';
})
#fix>tbody>tr>td>div {display: none;}
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
If you're already loading jQuery in the project, you should probably use this instead (haven't tested, but it should include IE8, which the above doesn't):
$('#fix>tbody>tr>td>div').each(function(){
$(this).css({
"max-height":$(this).parent().height() + 'px',
display:"block"
});
})
#fix>tbody>tr>td>div {display: none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="height:50px" id="fix" cellpadding="0" cellspacing="0">
<tr style="height:100%">
<td style="height:100%">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
Note that due to user agent default styles, table elements might be rendered in different browsers with small spacing (cellpadding and cellspacing) (usually 1-2px) and those will be deducted from the available height. You could prevent this behavior by setting both cellpadding and cellspacing to 0 on the parent <table> (like I did) or by resetting user agent default styles for <table> elements.
Can you add a display block to the parent table and it's table body, table rows and table cells? This works in Firefox and IE 11 (not sure how far back you have to go.)
https://jsfiddle.net/fwuzqo3o/
<table style="height:50px; display: block;">
<tbody style="height: 100%; display: block;">
<tr style="height:100%; display: block;">
<td style="height:100%; display: block;">
<div style="overflow-y:scroll;height:100%">
<table style="table-layout:fixed">
<tr>
<td>One</td>
<td>Two</td>
</tr>
<tr>
<td>Three</td>
<td>Four</td>
</tr>
<tr>
<td>Five</td>
<td>Six</td>
</tr>
<tr>
<td>Seven</td>
<td>Eight</td>
</tr>
<tr>
<td>Nine</td>
<td>Ten</td>
</tr>
<tr>
<td>Eleven</td>
<td>Twelve</td>
</tr>
</table>
</div>
</td>
</tr>
</tbody>
</table>
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>
I'm trying to help my son with a HTML project. This is to be only HTML, not CSS. He has to build a table with his school class schedule. I can't seem to get the columns to line up.
<!DOCTYPE html>
<html>
<body>
<center> Howie </center>
<p><table border="0"
cellpadding=0>
</tr>
<tr>
<th>Period</th>
<th>Class</th>
<th>Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td> </tr>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</table></p>
Any suggestions? Any help would be appreciated.
Thanks,
Al
Im sorry... But please look at the code first.
You are beginning with a </tr> That means you want to close a <tr>
And at the end you dont close the <tr>
Second point, why a table inside of a <p> ?
I think if you fix those minor faults.. it will be fine.
Succes with helping your son
Your HTML is malformed. Among other issues:
There is a stray closing </tr> tag just inside <table> tag which needs to be removed.
After the <td></td> containing "Rogers" is an extra </tr> which needs to be removed.
You are missing a </tr> at the end of the table before the </table> tag.
Your HTML is missing the closing </body> and </html> tags.
You should use an HTML validator, such as this one. This will help you discover these types of issues in the future.
They seem messed up because default h alignment for <th> is center and for <td> is left. If you switch th with td you should be fine.
I also agree with the other answers that you have some html issues. I recommend you write html using a specialized editor.
your open and close tags were somewhat messy.
plus I added some html alignment for the head row.
Next time use a text highlighting editor, it makes life a whole lot easier to find the issues:
jsFiddle Example
<p><table border="0" cellpadding="6" cellspacing="0">
<tr>
<th align="left">Period</th>
<th align="left">Class</th>
<th align="left">Teacher</th>
</tr>
<tr>
<td>1</td>
<td>Band </td>
<td>Sletten</td>
</tr>
<tr>
<td>2</td>
<td> Intro to IT</td>
<td>Rogers</td>
</tr>
<tr>
<td>3</td>
<td>Biology</td>
<td>Braet</td>
</tr>
<tr>
<td>4</td>
<td>Study Hall</td>
<td>Mendoza</td>
</tr>
<tr>
<td>5</td>
<td>English II</td>
<td>Johnson</td>
</tr>
<tr>
<td>6</td>
<td>US History</td>
<td>Peterson</td>
</tr>
<tr>
<td>7</td>
<td>Advanced Algebra </td>
<td>Connon</td>
</tr>
<tr>
<td>8</td>
<td>Spanish II </td>
<td>Michel</td>
</tr>
</table></p>