I have a table that has many columns and I am using jquery-datatables. I want this table to fit on his container but the table goes over it! I am using bootstrap table-responsive and as you see there is a scroll bar in the buttom of the table!
<div class="table-responsive"></div>
It also is not getting smaller when the page is resized! can anyone help me ??
here is my plunker:
https://plnkr.co/edit/5LsDrsRPexXHpsWoSRFr?p=preview
Just use table width 100% css. It will make the scroll able with fixed container.
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed flip-content" id="topPerformerTable" width="100%">
<thead style="background:#C0C0C0;">
<tr>
<th style="padding-left: 15px;"> Id </th>
<th> Product Name </th>
<th> Total Events </th>
<th> Total Revenue </th>
<th> Rental Time </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
Related
I am attempting to create a section at the top of a web page that will show 2 status tables side by side. I have this setup, but am unable to get one element working - adding a vertical scroll to the right-hand table.
I want the tables to occupy at most 25% of the viewport height and have a vertical scroll on the right table when the data would exceed that size (the left hand table data should remain small). The reason for this is that there will be other items added to the page underneath the table.
I am able to get a vertical scroll to work if I manually set the table to a certain pixel height, but this is not desired as I want it to be responsive to the screen size.
My page is using Bootstrap 5 and jQuery 3.6.
Here is an example of an attempt, you can also use this fiddle
HTML
<div class="page-body">
<div class="container-fluid h-25">
<div class="row justify-content-around h-25">
<div class="col">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="2" style="text-align:center">System Status</th>
</tr>
<tr>
<th>Active Jobs</th>
<th>Queued Jobs</th>
</tr>
</thead>
<tbody>
<td></td>
<td></td>
</tbody>
</table>
</div>
<div class="col overflow-scroll">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th colspan="3" style="text-align:center">Recently Executed Tasks</th>
</tr>
<tr>
<th>Job</th>
<th>Task</th>
<th>Start Time</th>
</tr>
</thead>
<tbody>
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
...many more rows...
<tr>
<td>Job B</td>
<td>Task X</td>
<td>06.06.2022 15:31:17</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
CSS
.page-body {
width:100vw;
height:100vh;
}
Instead of keeping to 25% of the view as I desire, the table expands to fill the entire page.
Any tips for how to fix this?
In order to perform the scrollable in a vertical position, you have to make sure that your parent element has a fixed height using CSS: e.g.: style="height:200px;" And your HTML code just looks like this.
<div class="page-body">
<div class="container-fluid h-25">
<div class="row">
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="col-md-6 overflow-scroll" style="height:200px;">
<table class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
</div>
I hope this will help you. If you just want to get more advance in Web development, please kindly check out my Web Programming Course
Thanks
I have a problem with bootstrap table, on phone resolution, my table in phone resolution will appear like this:
Here is my code:
<table class="table table-hover table-dark mt-3 table-bordered">
<thead>
<tr>
<th scope="col" >#</th>
<th scope="col" >Value</th>
<th scope="col" >Action</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Username</th>
<td><?=$Username?></td>
<td></td>
</tr>
<tr>
<th scope="row">Email</th>
<td><?=$Email?></td>
<td></td>
</tr>
</tbody>
</table>
If you look the text of the photo you will see that the text "go out" from the screen, how can I fix it?
Add table-responsive class to the table. You can also make is specific to view breakpoints.
More details here
i'm beginner who just started
i've tried to following video of creating forum using bootstrap 4 in youtube
but table-responsive doesn't work
i think my code is same as in video but browser not the same
my broswer
browser in youtube
here's my table. i hope someone help me..
thanks
<table class="table table-striped table-bordered table-responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="forum-col">Forum</th>
<th scope="col">Topics</th>
<th scope="col">Posts</th>
<th scope="col" class="last-post-col">Last post</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3 class="h5">Forum name</h3>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</td>
<td>
<div>5</div>
</td>
<td>
<div>18</div>
</td>
<td>
<h4 class="h6">Post name</h4>
<div>by Author name</div>
<div>05 Apr 2017, 20:07</div>
</td>
</tr>
<tbody>
you should wrap the table in element and take the .table-responsive class out of tag and put that class in wrapping div element. .table-responsive class should include break point size for example .table-responsive-sm
<div class="table-responsive-sm">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>.</th>
Your first TD is not set to word wrap. You can add the following CSS declaration to your TD elements to resolve this issue:
word-break:break-all;
Since the td content length is so high. You need to break the words inorder to get responsive table
Look at this Fiddle JSFiddle
CSS:
td{
word-break:break-all;
}
How can I centralize a thead text in HTML tables?
I'm trying this:
...
<thead rowspan="3" align="center">
<th> Table </th>
</thead>
...
<th style="text-align: center"> Table </th>
Try giving th width of 100% with text-aling:center as style property
I am trying to adapt some parts of my web application for mobile devices, and I am currently working on the following form using Html/css.
I came across this little problem concerning the table. In fact, I can't fix the size of the table cells. For the moment I am using the following code:
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
</tr>
<tr>
<th style="width:10px" >Date d'ajout </th>
<th style="width:10px">NOM DU FICHIER</th>
<th style="width:10px">Ajouté par </th>
</tr>
</thead>
<tbody>
<th>19/22/2016 </th>
<th>25_02_2016_file_name </th>
<th>testla team Fsqsf qsfqsqsfqg qsdg sdgsdg sdsgd sdsd</th>
</tbody>
</table>
so what's the right way to do it? thanks in advance
try with this below code it may help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="table-responsive">
<table class="table table-striped table-hover table-bordered" id="sample_editable_1">
<thead>
<tr>
</tr>
<tr>
<th style="width:10px" >Date d'ajout </th>
<th style="width:10px">NOM DU FICHIER</th>
<th style="width:10px">Ajouté par </th>
</tr>
</thead>
<tbody>
<th>19/22/2016 </th>
<th>25_02_2016_file_name </th>
<th>testla team Fsqsf qsfqsqsfqg qsdg sdgsdg sdsgd sdsd</th>
</tbody>
</table>
</div>
use width="100%" and it will take up the full space of the parent div / span that it is in.
If you are developing for mobile I would recommend using Bootstrap if you know it / looking at it if you don't. It's a very handy library for HTML when developing mobile compatible webpages.
Instead you can use a scroll for the table
table{overflow-x:auto}