I'm using bootstrap 5 to create responsive tables which works fine but when one column has a lot of text all other columns get squished making it look weird. I would like to set it so that the columns with smaller amounts of texts and the table headers to not get cut off. I also have the table set to responsive which in bootstrap's css sets overflow-x: auto.
Picture of what the table looks like on mobile
Second Picture of mobile
Picture of what it looks like on pc
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
</head>
<div class="container">
<div class="table-responsive">
<table class="table table-sm table-bordered table-hover">
<thead class="table-warning">
<tr>
<th scope="col">Ticket ID</th>
<th scope="col">Asset Type Or User</th>
<th scope="col">Asset Tag</th>
<th scope="col">User ID</th>
<th scope="col">Name</th>
<th scope="col">Location</th>
<th scope="col">Description</th>
<th scope="col">Date Added</th>
<th scope="col">Priority</th>
<th scope="col">Mark As Done</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">4</th>
<td>computer</td>
<td>C-Place-Holder</td>
<td>NA</td>
<td>Tom Blow</td>
<td>In Health Building, Bottom Floor</td>
<td>User would like to print color, has missing files, and monitor is flickering.</td>
<td>2021-02-24</td>
<td>3</td>
<td>
<button class="btn btn-primary" id="4" onclick="markDone(4)">Done</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
To make it 100% you have to add this command to your CSS
.table-responsive { display: table; } but this won't work for smaller screens. You have to use media queries for that.
Hope my answer helps you.
Related
I have a Bootstrap table that allows users to select rows which adds the class="success" to the select Row. I'm using the defaults for the contextual classes:
https://getbootstrap.com/docs/3.3/css/#tables-contextual-classes
but the customer would like, just for this particular page, to have the success be a more brighter green that stands out more.
Here's an example of the table:
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center">
<button type="button" class="btn btn-success btn-sm">Select</button>
</td>
</tr>
</tbody>
</table>
What's the best way to change the 'success' colour so it's a brighter green just for this page without changing the Bootstrap CSS itself?
.new-green {
background: #00ff00 !important;
}
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<table class="table table-condensed table-striped table-bordered">
<thead>
<th scope="col">Serial #</th>
<th scope="col">Product Code</th>
<th scope="col">ID</th>
<th scope="col">Description</th>
<th class="text-center" scope="col">Select</th>
</thead>
<tbody>
<tr class="success" id="PZs456">
<td>ZK2342MFM</td>
<td>JMPG</td>
<td>98651217</td>
<td>Keyboard - Bluetooth</td>
<td class="text-center"><button type="button" class="btn btn-success btn-sm new-green">Select</button></td>
</tr>
</tbody>
</table>
I do not know if this is a best way but since there are a lot of !important things in bootstrap why dont you use your own as new class?
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 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 have this table, but elements at last column don't fit the entire table when display is in a big size. What am I doing wrong?
Large
Medium
Small
I have
<div class="panel-body">
<table class="table mb30" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="40%">Site URL</th>
<th width="25%">Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Name</td>
<td>URL</td>
<td>Action</td>
</tr>
</tbody>
</table>
</div>
I've put together a fiddle
You need <meta name="viewport" content="width=device-width"> in the header.
then use:
#media screen and (max-width : 725px ){
#id {}
.class {}
}
change max-width to what you want.
Don't give the action column a percentage width. If you give table headers a percentage that adds up to the total and leave out a column, all the % based columns will take up as much room as they have available.
https://jsfiddle.net/pkjbpsr7/1/
For example:
<tr>
<th width="5%">#</th> <!-- This column and the next two will fill the space available. -->
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th>Action</th> <!-- This one will just chill off to the side and only take up as much room as it has width -->
</tr>
If you need it to take up a certain amount of space, you can always give it a min-width:
https://jsfiddle.net/pkjbpsr7/4/
<th width="5%">#</th>
<th width="30%">Site Name</th>
<th width="65%">Site URL</th>
<th id="min-width">Action</th> <!-- This will take up 100px per it's min-width -->
I am using bootstrap's table-responsive to create a simple responsive table for my layout. However this class only works on mobile. Is there a way I can make it work on tablet as well?
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
</tbody>
</table>
</div>
Here is the code. it is just a simple table layout.
And this is how it looks on mobile, my cells got smaller. Even when i adjusted the widths on my css, it wont respond to it.
You may want to consider using the !important rule in your CSS for your widths if you want to force the table to maintain the columns displayed as you anticipate.
Or you can use white-space: nowrap; like the example below to force the columns to not insert break lines that otherwise would happen first before your table starts behaving in a responsive manner. In other words, you are forcing the table to become responsive before trying to move text to a second line.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<style>
td {
white-space: nowrap;
}
</style>
<div class="histlog col-md-12">
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="hist1">One</th>
<th class="hist2">Two</th>
<th class="hist3">Three</th>
<th class="hist4">Four</th>
<th class="hist5">Five</th>
<th class="hist6">Siz</th>
<th class="hist7">Seven</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td>1asdfasdf</td>
<td>2asdfasdfasdf</td>
<td>3asdfasdfasdf</td>
<td>4asdfasd</td>
<td>5asdfasddf asdf as</td>
<td>6wer wer we </td>
<td>7asdf asdfwe </td>
<td>8sdfds f sd</td>
</tr>
</tbody>
</table>
</div>