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.
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 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
Cant I display one value of th element in tr with ng-repeat?
This is how my html looks
<div class="center layout-column flex">
<section layout="row" layout-align="left left">
<md-button class="md-primary" ng-click="vm.showDialogAdd($event)">Add new movie</md-button>
<md-button class="md-primary" ng-click="vm.showDialogDetails($event)">Add details</md-button>
</section>
<div class="simple-table-container md-whiteframe-4dp">
<div class="ms-responsive-table-wrapper">
<table class="simple" ms-responsive-table>
<thead>
<tr>
<th>Title</th>
<th>Year</th>
<th>Country</th>
<th class="text-center">Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="movie in vm.movies">
<td>{{ movie.title }}</td>
<td>{{ movie.year }}</td>
<td>{{ movie.country }}</td>
<td class="text-center">
<md-button class="md-warn" ng-click="vm.deleteMovie(movie)">Remove</md-button>
<md-button class="md-noink" ng-click="vm.showDetails(movie)">Details</md-button>
</td>
</tr>
<tr ng-repeat-end ng-show="movie._detailsVisible" ng-repeat="detail in vm.movieDetails">
<th>Actors: </th>
<td>
{{ detail.name }}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I want to display "Actors:" like a title of all tds, something like that:
How can I do this?
Just move ng-repeat to td
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>Actors: </th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</td>
</tr>
I'm not sure what do you mean by display "Actors:" in one td, but you can try adding it in front of the detail name so that it will be displayed with the value in one single td.
Edit: Please try the below code to achieve your requirement.
<tr ng-repeat-end ng-show="movie._detailsVisible">
<th>
Actors:
</th>
<td ng-repeat="detail in vm.movieDetails">
{{ detail.name }}
</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