I am trying to make a table responsive when the screen size gets smaller. It is a table-responsive class inside a col-6, but when the screen gets smaller, the td's and th's get stacked below each other..
I want the table to get smaller, or just wider in some way.
I tried some bootstrap responsive classes, but on a table it seems to be quite hard.
<div class="col-6 col-lg-6 col-xl-6">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Dealtype</th>
<th>Start date</th>
<th>End date</th>
<th>Investment</th>
<th>Price per review</th>
<th>Logistics costs</th>
<th>#Reviews</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ $deal->dealtype }}</td>
<td>{{ $deal->startdate }}</td>
<td>{{ $deal->enddate }}</td>
<td>€ {{ number_format(round($deal->amount, 2), 2) }}</td>
<td>€ {{ number_format(round($deal->reviewprice, 2), 2) }}</td>
<td>€ {{ number_format(round($deal->logisticsamount, 2), 2) }}</td>
<td> {{ $deal->quantity }}</td>
</tr>
</tbody>
</table>
</div>
</div>
I expect the table width to resize with the screen, but obviously the col-6 makes the content stack below each other.
here is a picture of the problem
Related
I have a table to list the vehicles, i need to show one message over the last three table headings only always above the three headings without exceeding the table heading width (total width of three headings).
I have implemented tried:
<div class="col-md-12">
<h2>Vehicle List</h2><br>
<h2>To be Sold</h2>
<div class="table-responsive">
<div class=" col-md-6 alert-warning" id="vechicle_msg_div">Documents pending for these
vehicles</div>
<table class="table table-bg m-t-sm">
<thead>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
<tbody *ngIf="vehicleList != null">
<td>{{ vehicleList.length +i }}</td>
<td>{{ list.ownername }}</td>
<td>{{ list.place }}</td>
<td>{{ list.name }}</td>
<td>{{ list.brand }}</td>
<td>{{ list.color }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
#vechicle_msg_div {
position: relative;
top: 1px;
padding: 10px;
width:auto;
float: right;
text-align: center;
border: 1px dashed;
}
Now what happens is the width of the text in vechicle_msg_div is not properly aligned and also the width of the text div changes based on the content of any of the td width varies.
I want to display the vechicle_msg_div in same width of last three <th></th> what ever the content's width is..
You can create another table header row and use the the colspan attribute to let its table data cells span multiple columns like this:
<table>
<thead>
<tr>
<td colspan="3"></td>
<td colspan="3">Documents pending for these vehicles</td>
</tr>
<tr>
<th width="30">No</th>
<th>Owner Name</th>
<th>Place</th>
<th>Name</th>
<th>Brand</th>
<th>color</th>
</tr>
</thead>
</table>
Check out the mdn pages around https://developer.mozilla.org/en-US/docs/Web/HTML/Element/td#attr-colspan for more details.
I have created a table using bootstrap class in a angular project. Only table-striped and table-hover class is not working remaining classes like table-primary is working. and I have not written a single line of css code (no issue of overriding).I have tried other examples in stack but didn't work the issues were of tbody. i have tried including tbody tag but didn't work.
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date: 'short' }}</td>
</tr>
</thead>
</table>
</div>
You have to define <thead> and <tbody> tags inside the <table> tag.
table content inside the tbody will only be affected by .table-striped class as mentioned in the official document
at the beginning I wrapped and wrongly.
my mistake was that i put tag inside tag initially then i tried removing tag. but i now wrapped correctly outside
like this
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
<tbody>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
</tr>
</tbody>
</thead>
</table>
</div>
but actually tag should be after closing tag like the below one code
<div class="container box" style="margin-top: 10px;">
<table class="table table-striped table-fit table-bordered table-hover">
<thead>
<tr>
<th>Item</th>
<th>Amount</th>
<th>Category</th>
<th>Location</th>
<th>Spent On</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let entry of expenseEntries">
<th scope="row">{{ entry.item }}</th>
<th>{{ entry.amount }}</th>
<td>{{ entry.category }}</td>
<td>{{ entry.location }}</td>
<td>{{ entry.spendOn | date:'fullDate' | uppercase }}</td>
</tr>
</tbody>
</table>
</div>
I am using Bulma as a CSS frame to style my angular app, currently, I have a table that looks like this :
I am trying to make it look more like this :
How do I center the button and make the table look as close as it can to this one?
Here is the code I am using :
<table
class="table is-bordered is-striped is-narrow is-hoverable is-fullwidth"
>
<thead>
<tr>
<th>SESSION_ID</th>
<th>CARD_NUMBER</th>
<th>TRANSACTION_AMOUNT</th>
<th>TERMINAL_ID</th>
<th>EXTERNAL_STAN</th>
<th>TRANSACTION_DATE</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="
let row of MatchTransactions.onlyInFile1
| slice: 0:(page + 1) * 5;
let i = index
"
>
<td>{{ row.SESSION_ID }}</td>
<td>{{ row.CARD_NUMBER }}</td>
<td>{{ row.TRANSACTION_AMOUNT }}</td>
<td>{{ row.TERMINAL_ID }}</td>
<td>{{ row.EXTERNAL_STAN }}</td>
<td>{{ row.TRANSACTION_DATE }}</td>
</tr>
<tr>
<td class="is-centered" colspan="6">
<button
class="button"
*ngIf="
(page + 1) * 5 < MatchTransactions.onlyInFile1.length
"
(click)="page = page + 1"
>
Show more
</button>
</td>
</tr>
</tbody>
</table>
<tr>
<td class="has-text-centered" colspan="6">
<button class="button">Show more</button>
</td>
</tr>
In JavaScript, one style width value is set for all columns, and I can't resize them one by one. I need to resize columns one by one, not all at once:
<table class="table table-striped table-bordered dataTable" id="detailed">
<thead>
<tr>
<th>C1</th>
<th>C2</th>
<th>C3</th>
<th>C4</th>
<th>C5</th>
<th>C6</th>
</tr>
</thead>
<tfoot>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tfoot>
<tbody>
{% for col in cols %}
<tr>
<td>{{ col.name1 }}</td>
<td>{{ col.name2 }}</td>
<td>{{ col.name3 }}</td>
<td>{{ col.name4 }}</td>
<td>{{ col.name5 }}</td>
<td>{{ col.name6 }}</td>
</tr>
{% endfor %}
</tbody>
</table>
Use nth-child to change individual column's width. JSFiddle
tr>td:nth-child(1){
width:100px;
}
tr>td:nth-child(4){
width:450px;
}
You will have to assign an id (or class if you want to change some cells but not all.) to the tags. Then of course use normal CSS to change width, height or padding, etc.
PS. On my phone right now, hard to provide any sample code. Feel free to suggest edit.
Add to table
width: 100%
Next you can add something like this to each TH :
<th style="width: 10%; padding: 5px;">C1</th>
Or (best option i think) add to th class and set there a css
<th class="nameClass">C2</th>
Style CSS:
.nameClass {
width: 10%; // could be other value in px, inc etc.
padding: 5px;
}
Better options to make this is from user below :P
I have trouble aligning the thead with the td in tbody. I've tried adjusting the thead using display: table-header-group;. I also found out from here: Why isn't padding applied to table elements?, that padding does not work on 'table-header-group'. Thus when I tried providing padding-left to my th via CSS, nothing is happening. I've also tried using more <th></th> before my <th>Quantity</th> <th>Amount</th> <th>Total</th> so that 'more space' is added. However, I am still not able to align the thead with my content in tbody.
Does anyone know how to fix this issue? If possible, please also let me know if I am not doing things right. Any help is much appreciated.
Thank you!
Screenshot and code is provided below:
thead is too left
Here is my code:
<div class="table-responsive col-lg-12 " ng-show="ngCart.getTotalItems() > 0">
<table class="table-responsive table-striped ngCart cart summaryTable " >
<thead >
<tr cellpadding="10">
<th>Item</th>
<th>Quantity</th>
<th>Amount</th>
<th>Total</th>
</tr>
</thead>
<tfoot>
<tr ng-show="ngCart.getTax()">
<td></td>
<td></td>
<td>Tax ({{ ngCart.getTaxRate() }}%):</td>
<td>{{ ngCart.getTax() | currency }}</td>
</tr>
<tr ng-show="ngCart.getShipping()">
<td></td>
<td></td>
<td>Shipping:</td>
<td>{{ ngCart.getShipping() | currency }}</td>
</tr>
<tr>
<td></td>
<td></td>
<td>Total:</td>
<td>{{ ngCart.totalCost() | currency }}</td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="item in ngCart.getCart().items track by $index">
<td>{{ item.getName() }}</td>
<td>{{ item.getQuantity() | number }}</td>
<td>{{ item.getPrice() | currency}}</td>
<td>{{ item.getTotal() | currency }}</td>
</tr>
</tbody>
</table></div>
what you did was correct. all you need is to center the text alignment of your thead. or just align the tbody left.