I'm creating what's basically a todo app that has a calendar, it's specifically for seniors/vision impaired people and I need the calendar to be the full height of the browser.
I'm using a Bootstap 4.5 bordered table for the calendar but still can't get it to be the full height of the browser.
I've tried setting the .table class height to 100%. I've also tried using the Bootstrap sizing and flex utility classes of "h-auto" and "d-flex" as well.
<table class="table table-bordered h-auto">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry the Bird</td>
<td>Bird</td>
<td>#LBird</td>
</tr>
</tbody>
</table>
you can give the table element the css style:
table{
min-height: -webkit-fill-available;
}
Related
Im added to Angular website for table ,that table col is not align ,any one know how to do that correctly ?
Thanks
<div class="table-responsive ">
<table class="table" style="width: 100%">
<thead>
<tr>
<th scope="col" width="50">ID</th>
<th scope="col" width="300">Book Name</th>
<th scope="col" width="250">Total Book</th>
<th scope="col" width="250">Date</th>
<th scope="col" width="250">Remarks</th>
<th scope="col" width="250">Booking Date</th>
<th scope="col" width="250">Booking Status</th>
</tr>
</thead>
</table>
</div>
<mat-accordion>
<mat-expansion-panel (opened)="panelOpenState = true; openContent(order)"
(closed)="panelOpenState = false">
<mat-expansion-panel-header [collapsedHeight]="customCollapsedHeight"
[expandedHeight]="customExpandedHeight">
<table class="table ">
<tbody>
<tr>
<td class="tb-td-txt" width="50">12</td>
<td class="tb-td-txt" width="300">ABC</td>
<td class="tb-td-txt" width="250">100}</td>
<td class="tb-td-txt" width="250">10-11-2018</td>
<td class="tb-td-txt" width="250">Jhone Doe</td>
<td class="tb-td-txt" width="250">10-05-2019</td>
<td class="tb-td-txt" width="250">Completed</td>
</tr>
</tbody>
</table>
</mat-expansion-panel-header>
</mat-accordion>
There are a few things...
the lower table is a child of .mat-expansion-panel, so for the table outside it, we mimic the padding:0 24px
but there is also a down arrow for mat-expansion-indicator so we gotta increase the padding on the right side by 8px
next, we text-align center for the bottom table (which is inside the mat-expansion) so that the effect is similar
I have also put a red borders on the <td> so that you can see this
relevant CSS:
th, td{border:1px solid red;}
.table-responsive>.table{padding:0 32px 0 24px;}
mat-expansion-panel-header .table td{text-align: center}
complete working stackblitz here
How would I go about setting up an html table to use sticky headers and set the stickyHeaderOffsetY option.
The examples for
https://bootstrap-table.com/docs/extensions/sticky-header/ all assume you're using javascript to populate the tables and I cannot find any documentation on how to set the options any other way.
This is as far as I have gotten:
<table
data-toggle="table"
data-search="true"
data-sticky-header="true"
data-sortable="true"
data-show-columns="true"
class="table table-striped table-hover table-condensed">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
Sorry I cant comment, but do you try this?
<table
data-sticky-header="true"
data-sticky-header-offset-y="60"
></table>
I have a Bootstrap 4 table that shows monetary value information, but I have a display problem in the responsive mode, then I detail my problem:
I have the following Html code:
<div class="table-responsive">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
On the PC it is displayed perfectly:
But in response mode the problem appears:
What I want is that in the responsive mode, it looks like the pc. I have tried several ways to change the css to get this, but I could not.
Thank you very much!
You can give width to table and make it inline and another way is applying to white-space: nowrap; of table tr td
.tablewd{
min-width:450px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
<table class="table table-hover tablewd">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>$ 1,543,3345,432</td>
<td>$ 1,456,334,4545</td>
<td>$ 1,000,0202</td>
</tr>
</tbody>
</table>
</div>
Use Bootstrap-4's text-nowrap class for the table to avoid text break.
/* Source: Bootstrap-4 source code*/
.text-nowrap {
white-space: nowrap !important;
}
https://codepen.io/anon/pen/zLpzwe
You should add more css:
.table td { white-space: nowrap; }
Is it possible to separate each row using a margin, in a striped table in bootstrap v4. I want each row to spaced out a little to be more readable.
<table class="table table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
Table rows does not have margin values. You may consider to use padding values to td.
For reference :
.table td{
padding-bottom: 10px;
}
I'm trying to attribute an width for cells but it doesn't work. I used CSS to make it, since width is not supported in HTML5. In my problem I have a table with headers and inside that table I have another table with a scroll to show the results, I need to order the cell results by the headers attributing the same width as headers. Can someone help me?
Here's the fiddle . Thank you!
Here's what i've tried:
<table class="two">
<thead>
<tr>
<th style="width:150px">Tipo de Anúncio</th>
<th style="width:150px">Tipo de Imóvel</th>
<th style="width:150px">Localização</th>
<th style="width:150px">Mediador</th>
<th style="width:150px">Preço</th>
<th style="width:150px">Área</th>
</tr>
</thead>
<tbody class="scroll">
<tr>
<td colspan="2">
<div class="scroll">
<table>
<tr>
<td style="width:150px">January</td>
<td style="width:150px">$100</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
<td style="width:150px">February</td>
<td style="width:150px">$80</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>February</td>
<td>$80</td>
<td>February</td>
<td>$80</td>
</tr>
You have several problem in your layout but the main is not the width but the colspan : (thw width work right)
your th don't wrap all the column. If ypu have six column you need a colspan = 6
<tbody class="scroll">
<tr>
<td colspan="6">
I have touched only few element but ypou can see a preliminary result in this jsfiddle