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}
Related
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.
I am using this react-bootstrap table:
which it's HTML code is:
<Table striped bordered hover>
<thead>
I was trying to add the code here.
<tr>
<th>#</th>
<th>App</th>
<th>Domain Name</th>
<th>Pub Account ID</th>
<th>Relationship</th>
<th>Certification ID</th>
<th>Last update</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row"><input type="checkbox" id={'checkboxThick'+network.id} onClick={()=>this.checkCheckbox(network.id)}/></th>
<td>{network.product}</td>
<td>{network.domain_Name}</td>
<td>{network.publisher_Id}</td>
<td>{network.relationship}</td>
<td>{network.certification_Id}</td>
<td>{network.lastUpdate}</td>
<td className="actionCoulmn">
</td>
</tr>
</tbody>
</Table>
And I need to add this div as a part of the table:
I was trying to add some divs and styles to the <tr> and <th> with no success.
Does someone have any idea how to deal with it?
You could settle with this:
<div id="parent">
<div /> // your div here
<table /> // your existing table component
</div>
and use styling to merge them
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 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>
Hi in the below code I am getting this Consultation Charges: but after this heading it showing this symbol.I want to remove that how to do can any one help me form this issue
Expected output:
Main heading
subheading| ->how to remove this |
updated html
<table width="100%" border="1" style="width:100%;border-collapse: collapse;text-align:center">
<tr>
<th width="12.5%"><b>Bill Particular</b></th>
<th width="12.5%"><b>Bill Sub Particular</b></th>
<th width="12.5%"><b>Doctor</b></th>
<th width="12.5%"><b>Date</b></th>
<th width="12.5%"><b>Dis. Amt.</b></th>
<th width="12.5%"><b>Charge</b></th>
<th width="12.5%"><b>No. of Times</b></th>
<th width="12.5%"><b>Amount</b></th><br>
</tr>
<tr width="100%"><th colspan=2>Consultation Charges:</th><br>
</tr><br>
</table>
You can make use of tag which displays the text like a heading..
Ex:
<html>
<table>
<tr>
<th>Bill Particular</th>
<td>Values</td>
</tr>
</table>
</html>