Why is my Bootstrap table overflowing the containing card? - html

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?

Related

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>

Can not make vertical-align:middle work in a bootstrap table

Update
Based on jme11 answer the d-flex is preventing the alignment, however without d-flex the columns are totally messed up (using bootstrap 4)
To reporoduce: (first row should be aligned middle, but it is not)
http://jsbin.com/fafoweleka/1/edit?html,css,output
Context
I would like to align my text in a bootstrap 4 table. I am trying to use vertical-align:middle, but text is still aligned to top.
Question
What am I missing?
Markup:
<table class="table">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4" style="vertical-align:middle">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"></td>
</tr>
</table>
Result:

EDIT
If you want to use the d-flex class on the tr elements to allow for use of the col classes on the cells, you can align the text in a specific cell vertically by adding d-flex and align-items-center class to that cell.
.strecher {
height: 200px;
}
.my-table td {
display: flex;
align-items: center;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<h3>For a specific cell:</h3>
<table class="table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4 d-flex align-items-center">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
<h3>For all cells:</h3>
<table class="table my-table" style="background-color: #eee;">
<tr class="d-flex">
<td class="col-1">1</td>
<td class="col-4">Miami</td>
<td class="col-3">4.0</td>
<td class="col-3"><div class=strecher></div></td>
</tr>
</table>
</body>
</html>

Fitting a table properly in bootstrap3

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>

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

Unwanted space before page-header in Bootstrap

Just starting with Bootstrap and I am trying to make the page-header align to the top of page with no space between the start of header and web page (just like the black StackOverflow header on this page).
The code for the same is:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/bootstrap.min.js" ></script>
<link rel="stylesheet" href="css/bootstrap.min.css" ></link>
</head>
<body>
<div class="page-header" style="color:#FFFFFF;background-color:#009688;margin-top:0px">
<h1 style="text-align:center" >Welcome to USICT ATTENDANCE RECORD</h1>
</div>
<div class="container-fluid">
<p style="padding:1em 2em 1sem 2em">The table lists the name of people
studying in USICT along with their attendance in each subject.
</p>
<br/>
<table class="table table-hover">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Attendance(in %)</th>
</tr>
</thead>
<tbody>
<tr>
<td>Rahul</td>
<td>Tyagi</td>
<td>rahul.1992.tyagi#gmail.com</td>
<td>70</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
However I am getting a space between header and address bar of browser as shown in picture below:
I have tried setting
margin-top:0px;
and
position:absolute;
top:0px;
both don't work.

The h1 has a margin that exceeds the green bar.
Apply the following styles:
<div class="page-header" style="color:#FFFFFF;background-color:#009688;padding:9px 4px;margin-top:0;">
<h1 style="text-align:center;margin-top:10px;">Welcome to USICT ATTENDANCE RECORD</h1>
Working JSFiddle.

I Found out the culprit actually it was the h1 which was causing problems.
Since bootstrap applies default margins to h1,h2,h3 ...etc .
So I had to set both the margin of page-header as well as h1 to zero
which solved the problem.
Thank you for the slight hint about h1 from Xufox

Every heading tag such as h1, h2, h3 etc has its own margin thats why you get a white space.Before style your markup you should initializing some style example: tag , , so that you do get twitter bootstrap's own style.This is good practicing of style from markup.

Why don't you put a container-fluid and then a row and your page-header ?
Like this :
<div class="container-fluid">
<div class="row">
<div class="page-header">blabla</div>
</div>
</div>