Fitting a table properly in bootstrap3 - html

I have this simple table. How do I prevent the table from overflowing the boundaries of the panel ? What is the right way to handle this in bootstrap when the contained table has cell data that is too long? I looked at panel with table example here to write what I have:
Bootstrap panel with table
I believe I am using the outer most "container" div incorrectly as well as I am applying row classes to it directly.
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

If your cell data is too long it should be solved using text-overflow: ellipsis;. It will render Render an ellipsis ("...") to represent clipped text.
So your table cell will not overflow.
You will also have to use table-layout: fixed.
If you use table-layout: fixed- Table and column widths are set by the widths of table and col elements or by the width of the first row of cells. Cells in subsequent rows do not affect column widths.
Modified Snippet
body {
font-family: 'Oxygen', sans-serif;
background-color: #3F88BF;
}
.table-condensed {
font-size: 12px;
}
.table {
table-layout:fixed;
}
.table td {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th colspan="4">Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td >Data4</td> <td colspan="4">Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

You need to make table-layout: fixed; and in the last column use word-wrap: break-word;, because the last column contains a single word that is too long.
body { font-family: 'Oxygen', sans-serif; background-color: #3F88BF; }
.table-condensed { font-size: 12px; table-layout: fixed;}
.table-condensed td {word-wrap: break-word;}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="{{ description }}" />
<title>{{title}}</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet' type='text/css'>
</head>
<body>
<div class="container col-sm-10 col-sm-offset-1"> <!-- div container -->
<div class="page-header">
<h1 id="top">Some title</h1>
</div>
<div class="panel panel-default">
<div class="panel-body">
<h1 id="abc">ABC</h1>
<a class="pull-right" href="#top">top</a>
</div>
<table class="table table-bordered table-condensed table-striped">
<thead>
<tr>
<th>Head1</th>
<th>Head2</th>
<th>Head3</th>
<th>Head4</th>
<th>Head5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data1</td>
<td>Data2</td>
<td>Data3</td>
<td>Data4</td> <td>Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data5555555555555Data555555</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>

Related

Tooltips inside Accordion

I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.

Bootstrap table with scrollable attribute non generated correctly

I want to generate in PHP/Bootstrap a table with a scrollbar. I would like my table contains 2 lines visible and the rest visible using scrollbar.
Here is a working example : https://codepen.io/yavuzselim/pen/LNYrBd
Someone could fix my code ? I don't know where is the problem because I put the necessary CSS attributes in the tbody.
Here is the rendering of the page :
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:50px;overflow-y:scroll;">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>
I would change the height in the tbody, 74px instead of 200px.
Table with new height
tbody{
height:74px;
overflow-y:auto;
width: 100%;
}
Change the tbody height to 74px
Also, add "table-responsive" class on table tag.
tbody{
height:74px;
}
Solution : Just add to tbody the attributes : height:150px; width: 100%; display:block;overflow-y:auto
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="">
<title>Title</title>
<!-- Bootstrap core CSS -->
<link rel="stylesheet" href="ressources/style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" integrity="sha384-mKB41Eu6sQQvXR8fqvXcVe8SXodkH6cYtVvHkvLwE7Nq0R/+coO4yJispNYKy9iZ" crossorigin="anonymous">
<style>
</style>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div id="welcomeid">
<h4>Welcom to the page</h4> </div>
</div>
<div class="row">
<div id="mybutton">
<div id="buttonid">
Button
</div>
</div>
</div>
<div class="row">
<div id="livraison_chauffeur">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table class="table table-bordered table-striped mb-0">
<tbody style="height:150px;width: 100%;display:block;overflow-y:auto">
<tr>
<th scope="row">1</th>
<td>11/04/2020 10:18</td>
<td>Value1</td>
<td>Value2</td>
</tr>
<tr>
<th scope="row">2</th>
<td>11/04/2020 10:18</td>
<td>Value3</td>
<td>Value4</td>
</tr>
<tr>
<th scope="row">3</th>
<td>11/04/2020 10:19</td>
<td>Value5</td>
<td>Value6</td>
</tr>
<tr>
<th scope="row">4</th>
<td>11/04/2020 10:20</td>
<td>Value7</td>
<td>Value8</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="row d-flex justify-content-around text-button">
<label>A future button1</label>
<label>A future button2</label>
<label>A future button3</label>
</div>
</div>
</body>
</html>

Why is my Bootstrap table overflowing the containing card?

Actually i'm trying to set a table inside a bootstrap card, the issue is that the table width goes out off that card and i would to prevent it.
The table is made for each tr of one th and 96 td.
I was trying to set the table width to 100% and set to each td 1% of width but i didn't worked
Here is the table code:
<div class="col-md-8">
<div class="card p-2">
<div class="card-body text-center" >
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<asp:PlaceHolder ID="placeholder" runat="server"></asp:PlaceHolder>
</tbody>
</table>
</div>
</div>
</div>
</div>
The issue is the padding that Bootstrap applies. It results in each cell having a minimum width of 24px.
.table.no-cellpadding td
padding: 0;
}
Demo
Are you wrapping each set of td tags with a tr?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="col-md-8">
<div class="card p-2">
<div class="card-body text-center">
<div class="table-responsive">
<table class="table table-hover">
<tbody>
<tr class="class">
</tr>
<tr class="class">
</tr>
<tr class="class">
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script type="text/javascript">
window.onload = () => {
let allTrs = document.querySelectorAll('tr.class');
allTrs.forEach((tr) => {
for (let i = 0; i < 96; i++) {
const newTd = document.createElement('td');
newTd.style = "width: 1%";
newTd.appendChild(document.createTextNode('value'))
tr.appendChild(newTd)
}
})
}
</script>
</body>
</html>
Does this fit your needs?

css Autosize table header with glyphicon

Is it possible to autosize a column by its header size which includes a glyphicon right aligned?
E.g.:
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
And the style:
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
Pushes the glyphicon to the second column.
Full code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.autosize {
width: 1px;
white-space: nowrap;
}
</style>
</head>
<body>
<table class="table table-bordered" style="width: 1px;">
<thead>
<tr>
<th class='autosize'>Col1 <span class='glyphicon glyphicon-sort pull-right' aria-hidden='true'></span></th>
</tr>
</thead>
</table>
</body>
</html>
Gee always the way you spend hours changing css to see what works and by posting here I had the light turned on, all I had to do is remove the pull-right class out of the glyphicon

Align text above material design icon (using materializecss)

I am currently using the materializecss framework and pulling in an icon and putting it beside a text. I need to align the text in the middle above the icon with css but what I currently have does not seem to be working.
<table class="centered">
<thead>
<th class="align-text"><i class="material-icons small">timer</i>Time</th>
<th>Another header</th>
<th>And another header</th>
</thead>
</table>
my css file at the moment:
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
However, the text still stays to the right of icon.
This is the result that I am ultimately trying to achieve.
Updated: Here's what you need ^_^ DEMO
<!DOCTYPE html>
<html>
<head>
<!--Import Google Icon Font-->
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--Import materialize.css-->
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection" />
<style>
th {
display: inline-block;
}
.align-text {
display: inline-block;
text-align: center;
vertical-align: top;
}
span {
display: block;
}
</style>
<!--Let browser know website is optimized for mobile-->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<table class="centered">
<thead>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
<th class="align-text"><span>Time</span><i class="material-icons small">timer</i>
</th>
</thead>
</table>
<!--Import jQuery before materialize.js-->
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
</body>
</html>