How do I get my panel width to only be big enough to contain my table?
Plunker: http://embed.plnkr.co/o0PDPAeo2lnLKNU55Ber/preview
The number of table columns are dynamic so I can't set it to a fixed width.
<div class="container">
<div class="table-responsive standings">
<div class="panel panel-primary">
<div class="table-responsive standings">
<table class="table table-striped table-condensed entry-grid">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Strikes</th>
<th class="text-center pick-title">1</th>
...
<th class="text-center pick-title">12</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entry 1</td>
<td class="text-center">1</td>
...
<td class="text-center pick">A</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.container {
width: 750px;
padding: 20px;
}
.standings > table {
width: auto;
}
.standings .pick-title {
width: 42px;
}
.standings .pick {
height: 41px;
width: 41px;
padding: 8px 0;
font-size: 10px;
}
Thanks
You will want to give a display Inline-Block to your panel DIV. This way, the panel will adjust to it's content width
.panel{
display: inline-block;
}
Related
Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<!-- some rows -->
</tbody>
</table>
To scroll in tbody, I added a scss class .custom-table to table, it looks like this
.custom-table {
tbody {
height: 50px;
overflow-y: auto;
width: 100%;
display: block;
}
}
However, this style does not work correctly. All content in tbody moves to the left. I have a working JSFiddle example.
What did I do wrong?
Please check bellow, I prefer to use flexbox. I also use -webkit and -ms prefixes for more cross browser compatibility
tbody , thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
tr {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
th,td {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
tbody {
height: 50px;
overflow-y: auto;
}
thead {
padding-right: 20px;
}
I set padding-right to thead because of the scrollbar on tbody.
Did you tried to like this?
Change your css like this
.custom-table> tbody {
display:block;
height:50px;
overflow:auto;
}
.custom-table> thead, tbody tr {
display:table;
width:100%;
}
.custom-table> thead {
width: 100%
}
.custom-table {
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
</tbody>
</table>
</div>
Using Udara Kasun's solution, but making the columns lines up:
.custom-table>tbody {
display: block;
height: 50px;
overflow: auto;
}
.custom-table>thead,
tr {
display: block;
width: 100%;
}
.custom-table>thead {
width: 100%
}
.custom-table {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="flex-group-1" style="overflow-y: auto">
<table class="table table-striped table-hover custom-table table-bordered table-responsive ">
<thead>
<tr>
<th width="100">col1</th>
<th width="100">col2</th>
<th width="100">col3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">text1</td>
<td width="100">text2</td>
<td width="100">text3</td>
</tr>
<tr>
<td width="100">text4</td>
<td width="100">text5</td>
<td width="100">text6</td>
</tr>
<tr>
<td width="100">text7</td>
<td width="100">text8</td>
<td width="100">text9</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 5
Table with fixed heading row & vertically scrollable tbody
CSS Only
You have to put the table within a div
HTML:
<!-- Table -->
<div class="container shadow-sm alarm-table">
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
/* Makes table scrollable */
.alarm-table{
height: 150px;
overflow: auto;
}
/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
position: sticky;
top: 0;
}
Using table-responsive with header fields, the right most column has buttons and no text in the header. When the width is too small, the column is cut off and not completely viewable using the scroll. If text is added for the header, nearly all of the column is visible, but I don't want to do this and it's not a complete solution.
<div class="row">
<div class="col-sm-12">
<div class="table-responsive">
<table st-table="appointments" class="table table-striped table-appointments">
<thead>
<tr>
<th>Family Id</th>
<th>Survey Name</th>
<th>Appointment Date</th>
<th>Start Time</th>
<th>Progress</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="appointment in $ctrl.appointments">
<td class="appointments-familyid">{{appointment.familyIdName}}</td>
<td class="appointments-survey">{{appointment.surveyName}}</td>
<td class="appointments-date">{{appointment.date | date:'MMMM dd, yyyy'}}</td>
<td class="appointments-starttime">{{appointment.startTime | date:'hh:mm a'}}</td>
<td class="appointments-progress">{{appointment.progress}}</td>
<td class="appointments-begin">
<button type="button" ng-click="$ctrl.startSurvey(appointment)" class="btn btn-sm btn-success">
Begin Survey
<i class="glyphicon glyphicon-circle-arrow-right">
</i>
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
CSS:
td.appointments-familyid{
width: 5%;
}
td.appointments-counselor{
width: 20%;
}
td.appointments-survey{
width: 25%;
}
td.appointments-date{
width: 10%;
}
td.appointments-starttime{
width: 15%;
}
td.appointments-progress{
width: 15%;
}
td.appointments-begin{
width:10%;
}
table.table-appointments td{
max-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
table-responsive adds:
.table-responsive {
min-height: .01%;
overflow-x: auto;
margin-right: 20px;
}
The rendered table looks like this:
I want to create a table with a lot of data. To keep it all sorted out, I want the table to be scrollable. I use bootstrap to pimp up the table.
I know this question is asked before and the solution does work for me, but my table is a mess. See the table on the right for what it looks like. I want it to look more like the table to the left.
So what I tried is:
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Speciale tarieven buiten 's-Herogenbosch</h3>
<div class="pull-right">
<span class="clickable filter" data-toggle="tooltip" title="Klik om te zoeken"
data-container="body">
<i class="glyphicon glyphicon-search"></i>
</span>
</div>
</div>
<div class="panel-body">
<input type="text" class="form-control" id="task-table-filter" data-action="filter"
data-filters="#task-table" placeholder="Zoek naar een plaats.."/>
</div>
<table class="table table-hover table-fixed" id="task-table">
<thead>
<tr>
<th >#</th>
<th>Van</th>
<th>Naar</th>
<th>Normaal</th>
<th>Onze prijs</th>
<th>Korting</th>
</tr>
</thead>
<tbody class="alignmentp">
<tr>
<td>1</td>
<td>'s-Hertogenbosch</td>
<td>Ammerzoden</td>
<td>€ 35,00-</td>
<td>€ 24,99-</td>
<td>30 %</td>
</tr>
<tr>
<td>2</td>
//etc etc
</tr>
</tbody>
</table>
</div>
And the CSS I use with this is:
.alignmentp{
text-align: left !important;
}
.table-fixed thead {
width: 97%;
}
.table-fixed tbody {
height: 230px;
overflow-y: auto;
width: 100%;
}
.table-fixed thead, .table-fixed tbody, .table-fixed tr, .table-fixed td, .table-fixed th {
display: block;
}
.table-fixed tbody td, .table-fixed thead > tr> th {
float: left;
border-bottom-width: 0;
}
I can fix this table by manually correcting the width and height of each <"tr"> and <"td"> element, but there must be a better way of doing this..
Sounds like you are having problems with your columns not lining up. What you could do is find out how wide your widest element is (<td> or <th>) and then set all <td> and <th> elements to that width.
Another possible solution is to add the table-responsive class to your table, as defined in the Bootstrap table docs, and make the width of your <td> and <th> elements be defined by how many there are in a row. If there are five <td>s in a <tr>, set the width of the <td>s to be 20%.
Hope this fixed your problem, if not, just comment below and I'll try again.
.fixHeader{
overflow-y: auto;
}
.fixHeader th {
position: sticky;
top: 0;
background-color: #b4bab4;
}
.fixHeader table {
border-collapse: collapse;
width: 100%;
}
.fixHeader th,
.fixHeader td {
padding: 8px 16px;
}
<div class="fixHeader" style="height:200px;">
<table class="table card-border">
<thead class="tableHead">
<tr>
<th scope="col">
<label class="form-check-label">xyz</label>
</th>
<th scope="col"> abc</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of listData">
<td>
<div class="form-check">
{{item.Name}}
</div>
</td>
<td>
<label class="form-check-label">{{ item.Value }}</label>
</td>
</tr>
</tbody>
</table>
</div>
You can check this answer it was helpful for me.
In HTML you can add this:
<div class="panel panel-default">
<div class="panel-body">
<table id="myTable" class="table table-hover table-fixedheader table-bordered table-striped">
<thead>
<tr>
<th width="15%">Column1Column1Column1Column1</th>
<th width="15%">Column2</th>
<th width="15%">Column3</th>
<th width="15%">Column4</th>
<th width="40%">Column5</th>
</tr>
</thead>
<tbody style="height:110px">
<tr>
<td width="15%">aaaaaaaaaaa</td>
<td width="15%">bbbbbbbbbbb</td>
<td width="15%">ccccccccccc</td>
<td width="15%">ddddddddddd</td>
<td width="40%">eeeeeeeeeee</td>
</tr>
</tbody>
</table>
</div>
</div>
In your CSS add this link:
table.table-fixedheader {
width: 100%;
}
table.table-fixedheader, table.table-fixedheader>thead, table.table-fixedheader>tbody, table.table-fixedheader>thead>tr, table.table-fixedheader>tbody>tr, table.table-fixedheader>thead>tr>th, table.table-fixedheader>tbody>td {
display: block;
}
table.table-fixedheader>thead>tr:after, table.table-fixedheader>tbody>tr:after {
content:' ';
display: block;
visibility: hidden;
clear: both;
}
table.table-fixedheader>tbody {
overflow-y: scroll;
height: 100px;
}
table.table-fixedheader>thead {
overflow-y: scroll;
}
table.table-fixedheader>thead::-webkit-scrollbar {
background-color: inherit;
}
table.table-fixedheader>thead>tr>th:after, table.table-fixedheader>tbody>tr>td:after {
content:' ';
display: table-cell;
visibility: hidden;
clear: both;
}
table.table-fixedheader>thead tr th, table.table-fixedheader>tbody tr td {
float: left;
word-wrap:break-word;
}
Im trying to make a div scrollable (this div have a table inside) and is inside another div (this div have height: 100%). This little image show the result i need.
This is the code im using but if you can see in the image the scroll is not showing.
#main-aside
{
padding-top: 5px;
padding-right: 5px;
}
.table-search {
margin:0 auto;
width: 440px;
height: 41px;
padding: 3px 4px 1px 4px;
background: #212020;
border-bottom: #000 1px solid;
}
#listEmployeeTable { // this is the div that contains the table, not working now
overflow-y: auto;
overflow-x: hidden;
}
.employee-table-column table{
width: 440px; // table have a width specified
}
<aside id="main-aside" class="x-east">
<div class="table-search">
<label>Search by name</label>
<div class="input-group">
<span class="input-group-addon"><i class="fa fa-search"></i></span>
<input type="text" class="form-control" id="searchEmployeList">
</div>
</div>
<div id="listEmployeeTable" class="employee-table-column">
<table class="table-striped employee-data-table">
<thead>
<tr>
<th class="name">Name</th>
<th class="time">Time</th>
<th class="action">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>NAME 1</td>
<td class="Time">04/12/2015 03:04 AM</td>
<td class="Action">Start after left</td>
</tr>
</tbody>
</table>
</div>
</aside>
Currently this is how it looks
For some reason i cannot solve the issue to my problem. I am trying to fill the parent div with the table meaning that the table and the parent are the exact same width and height. I have tried using padding and pull-left and have had no success. Any input?
http://jsfiddle.net/pc1tz5z6/3/
HTML:
<div class="container">
<div class="row">
<div class="col-lg-4 vcenter">
<div class="well">
<center>
<img class="img-circle" src="http://cdn.akamai.steamstatic.com/steamcommunity/public/images/avatars/f7/f72a7e636d1b4831eb3d45cd9bcc893f7fccd8ae_full.jpg" width="120px" height="120px">
<h1>Welcome <strong>domkalan</strong> to Ozooma DarkRP</h1>
</center>
</div>
</div>
<div class="col-lg-4 vcenter">
<div class="well">
<div style="padding:0px; padding-left: ; width: 400px;">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="col-lg-4 vcenter">
<div class="well">
<div style="padding:0px; padding-left: ; width: 400px;">
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
CSS:
body {
background: url("http://images8.alphacoders.com/374/374665.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.vcenter {
margin-top: 15%;
}
.well {
background: rgba(255, 255, 255, 0.6);
width: 350px;
min-height: 200px;
max-height: 600px;
border-radius: 25px;
overflow: hidden;
}
It is related to the upper level div which has a .well class, and that means it has padding in bootstrap.
Adding "padding:0" to the div.well element will erase the gap between the table and its container.