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;
}
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've been trying to implement DataTables into my web site, I'm using Bootstrap 4 styling.
This is the HTML code:
<div class="panel-body">
<div class="dataTable_wrapper table-responsive">
<table class="table table-striped table-bordered table-hover display compact table-sm" id="TblDetalleComision">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
Do I need to wrap the table with CSS?
What am I doing wrong?
give tbody to class "table-sm" Like
<tbody class="table-sm"></tbody>
It worked for me
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}
I was simple table and I used bootstrap and classes table and table-striped. It works well.
<h3>Old table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr><td>Audi</td><td>A2</td></tr>
<tr><td>Audi</td><td>A3</td></tr>
<tr><td>Audi</td><td>A4</td></tr>
</tbody>
</table>
But now I have to complicate my table and use multiple tbody in tabled element (each tbody has two tr element). So bootstrap class table-striped does not work. There is any way to do it in bootstrap? The rows with cars should be table-striped but comment rows not.
<h3>Current table</h3>
<table class="table table-striped">
<thead>
<tr><th>Brand</th><th>Model</th></tr>
</thead>
<tbody>
<tr><td>Audi</td><td>A1</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A2</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A3</td></tr>
<tr class="comment"><td colspan="2">Comment...</td></tr>
</tbody>
<tbody>
<tr><td>Audi</td><td>A4</td></tr>
<tr class="comment hide"><td colspan="2">Comment...</td></tr>
</tbody>
</table>
Plunker example
The work around for bootstrap would be much more complicated than just putting in your own custom classes. The bootstrap source for table-striped simply makes all odd rows the different color. That means that you're likely going to getting way further in depth and causing yourself way more trouble if you try to have bootstrap do it for you versus just putting in the classes yourself.
$('tbody').parents('.fixed-table-container').find('tr:even').addClass( 'even' );
.even { background: #f9f9f9; }
And in bootstrap.min.css find --> .table-striped>tbody>tr:nth-of-type(odd){background-color:#f9f9f9} replace --> .table-striped>tbody>tr:nth-of-type(odd){background-color:none}
Please help, I want td was the same size everywhere. And that was a vertical scrolling.
I used height and this doesn't help.
I'm styled only th(his wight)
http://imageshack.us/f/402/feedbacktz.jpg/
<table class="table table-striped" id="feedback_table">
<thead>
<tr>
<th style="width: 25px">Anything</th>
<th style="width: 70px">Anything</th>
<th style="width: 80px">Anything</th>
<th style="white-space:nowrap; width: 125px">Anything</th>
<th style="width: 360px">Anything</th>
<th style="width: 114px">Anything</th>
</tr>
</thead>
<tbody>
if the reviews contain lots of text, the Text review is too broad (see attachment). Scrolling is required to see the edit button.
Set the table with.
<table class="table table-striped" id="feedback_table" width="774">
or
table.table { width: 774px; }
This might help in your case.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
i have modified the code according to your need for example below
<p>overflow:scroll</p><table>
<tr>
<td>
<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
</td>
</tr>
</table>
//CSS
div.scroll {
background-color:#00FFFF;
width:100px; height:100px;
overflow:scroll;
}
hope this helps!