I want to create a table where the same headings gets repeated in the same tr. It is a transcript in which semesters shall come side by side in the same row and it is fully dynamic, which means different marks according to semester will be shown as well as count of subjects may differ in each semester.
Could you please help me with this?
Here you can see the image of what the end result should look like
BTW, my approach was as follows:
<table class="table table-bordered center">
#foreach($exambatch as $exb)
<td>
<table class="table table-bordered">
<tr>
<td colspan="4" style="padding:5px;">
<b>Semester-{{ $semester->semester }}</b>
</td>
</tr>
<tr>
<td style="height:80px;">
<b class="vertical">
{{ Subject }}
</b>
</td>
<td>
<b class="vertical">
Something
</b>
</td>
<td>
<b class="vertical">
......
</b>
</td>
<td>
......
</td>
</tr>
<!-- Load Subjects -->
#foreach($sub as $subject)
<tr>
<td>{{ $sub->sub_name }}</td>
<td></td>
<td></td>
<td></td>
</tr>
#endforeach
But it doesn't work at all, I tried to use a table inside the td which worked however it didn't come in a singe row. Any good approach?
Related
<div *ngFor = "let recordData of employees.record">
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</table>
</div>
</div>
// **this is Angular code and this is the output this code is working but table header data is repeating after the each iteration.
I used ngFor for iteration the record array (it is in the first photo) loop. I used the ngIf to select the queryName and there are six record will come (it is in the first photo). I want that six record under a one table
**
Just moved structural directives and used ng-container to use ngIf and ngFor
I don't want to add extra element like div or span to apply ngIf and ngFor condition. that's why I used ng-container.
<div>
<div>
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<tbody>
<ng-container *ngFor = "let recordData of employees.record">
<ng-container *ngIf = 'recordData.queryName==="style-size-query"'>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</ng-container>
</ng-container>
</tbody>
</table>
</div>
</div>
Please try like this
<table class ="table">
<thead>
<tr> product </tr>
<tr> size </tr>
<tr> sortOrder </tr>
</thead>
<div *ngIf = 'recordData.queryName==="style-size-query"'>
<tbody>
<tr>
<td> {{recordData.data.product}} </td>
<td> {{recordData.data.size}} </td>
<td> {{recordData.data.sortOrder}} </td>
</tr>
</tbody>
</div>
</table>
I have a table in which the last column has a clickable arrow to display a nested table underneath.
<table class="table table-hover table-striped">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr *ngFor="let dData of dDatas;>
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()"><span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span></div>
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</tbody>
</table>
My problem is the inner table comes in the last <td> and the formatting isn't correct. I want to make the inner table to appear in a new row and span over the width of the outer table.
If I understand you correctly, you should utilise <ng-container>. This allows you you include multiple <tr> tags in each iteration of your for loop, giving your inner table a whole row and the ability to span the width of the table.
<ng-container *ngFor="let dData of dDatas>
<tr >
<td>{{dData.Name}}</td>
<td>{{dData.Desc}}</td>
<td>
<div (click)="onClick()">
<span class="glyphicon" [ngClass]="{'glyphicon-chevron-up': dcData.opendPanel , 'glyphicon-chevron-down': !dcData.opendPanel }"></span>
</div>
</td>
</tr>
<tr>
<td colspan="3">
<div [hidden]="!dData.opendPanel">
//another table
</div>
</td>
</tr>
</ng-container>
<ng-container> is a logical container that can be used to group nodes but is not rendered in the DOM tree as a node.
I'm trying to set up my website with an image, then under that image there will be two SVG files and two Bootstrap-style grids each containing one table of information. However, Bootstrap seems to be making them orient vertically instead of horizontally. You can see the end result here if you scroll to the bottom. As you'll see, the Population by Gender and Household and Family tables are one after another vertically instead of horizontally, as I want them to be. Please do note before voting to close this for duplicate that there are other problems similar to this one, but I've tried the solutions in them and they didn't work.
I've included code of the relevant portion of the HTML, it's a bit of a mess but as you can see the <div class="col-xl-6"> tags that Bootstrap uses are around the two tables, yet they still show up vertically. How come?
<div class="container-fluid">
<svg>HUGE SVG LINK REMOVED</svg>
<svg>2ND HUGE SVG LINK REMOVED</svg>
<div class="row">
<div class="col-xl-6">
<h3>Population by Gender</h3>
<div>Male: 627 (44.91%, )</div>
<div>Females: 769 (55.09%, )</div>
<br>
<table cellpadding="0">
<tr>
<td align="center">Block Group 970500-1</td>
<td>
<div>Male: 44.91%</div>
<div> Female: 55.09%</div>
</td>
</tr>
<tr>
<td align="center">New York</td>
<td>
<div id="pt" >Male: 48.39%</div>
Female: 51.61%
</td>
</tr>
<tr></tr>
</table>
<p class="small">*Based on 2010 data.</p>
</div>
<div class="col-xl-6">
<a name="HouseholdandFamily"></a>
<h3>Household and Family</h3>
<table class="tbb tbright" cellpadding="20">
<tr bgcolor="#eeeeee">
<td> </td>
<td><b>Block Group 970500-1</b></td>
</tr>
<tr>
<td>Total Households</td>
<td>548</td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Household Size</td>
<td>2.31,</td>
</tr>
<tr>
<td>1 Person Households</td>
<td>185, 33.76%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>2 or More Person Households</td>
<td>363, 66.24%, </td>
</tr>
<tr>
<td>Family Households (Families)</td>
<td>321, 58.58%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Average Family Size</td>
<td>2.98, </td>
</tr>
<tr>
<td>Married-Couple Family</td>
<td>221, 40.33%, </td>
</tr>
<tr bgcolor="#eeeeee">
<td>Nonfamily Households</td>
<td>227, 41.42%, </td>
</tr>
</table>
</div>
</div>
You're using <div class="col-xl-6">, that means this div would take 6 columns on extra large displays, but it will take full width on anything smaller.
So, you probably need to use something smaller like this:
<div class="col-md-6"></div>
or
<div class="col-lg-6"></div>
For 'Population by Gender' box: move <table> into <div> element.
For each of div element set class col-xs-6 col-md-6.
Here you can find examples: http://getbootstrap.com/examples/grid/
I want to display a number of <td> elements based on the same condition. I am currently doing that with multiple, identical, ng-if directives, as such:
<tbody>
<tr>
<td> Display unconditionally </td>
<td> Same here... (imagine more columns) </td>
...
<td ng-if='myCondition'> Display based on condition </td>
<td ng-if='myCondition'> And the same </td>
<td ng-if='myCondition'> for plenty of columns </td>
</tr>
</tbody>
While this works one can't help but notice all the repetition. Any ideas on how I could DRY that up?
Use ng-if-start and ng-if-end
<table>
<tr>
<td ng-if-start="false" >one</td>
<td>two</td>
<td ng-if-end >three</td></td>
<td>foure</td>
<td>five</td>
</tr>
</table>
Plunker
I have a table I decorated with bootstrap.
Here is the simple table view (collapsed).
Each table row has two horizontal sets of data. So the expanded view for each row shows up when the "Details" button is clicked. Here's the expanded view.
The first set of data of each row has 4 columns. While I'd like the second set of data of the same row to fully occupy the whole table width.
The problem is that the way I did it doesn't feel the best way to do it.
I pretty much used Angular loop construct to repeat the <tr>. I then embedded two tables per <tr> so that I can display the first data set in the first table and the expanded view in the second table. Clicking on the "Details" button shows the second set (table) of data of row.
<table class="table-hover table-condensed">
<!--<table class="table">-->
<thead>
<tr>
<th align="left" class="span2">Date</th>
<th align="left" class="span2">Title</th>
<th align="left" class="span2">Bill Total</th>
<th align="left" class="span4">Options</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="ibill in user.groups[0].bills | filter:query | orderBy:'date'">
<td colspan="4">
<table>
<tr>
<td class="span2">{{ ibill.billDate | date:'MM/dd/yyyy'}}</td>
<td class="span2">{{ ibill.title }}</td>
<td class="span2">${{ ibill.billTotal }}</td>
<td class="span4">
<!-- <a ng-click='deleteBill(ibill.id)'><i class="icon-trash "></i></a>
<i class="icon-pencil "></i>--> <a ng-click='deleteBill(ibill.id)' class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class=" icon-trash"></i></a>
<i class="icon-edit"></i>
<a class="btn btn-mini" ng-init="ibill.isCollapsed = 'true'" ng-click="ibill.isCollapsed = !ibill.isCollapsed"><i class="icon-eye-open"></i> details</a>
<!--<a class="btn" ng-init="ibill.isCollapsed=' true'" ng-click="ibill.isCollapsed=! ibill.isCollapsed"><i class="icon-folder-open "></i> Details</a>-->
</td>
</tr>
</table>
<table>
<tr>
<td colspan="4">
<div collapse="ibill.isCollapsed">
<div>
<p ng-repeat="simplecost in ibill.billSimpleEntry.simpleUserIdAndLiableCost">{{simplecost.user.fName}} owes ${{simplecost.liableCost}}</p>
</div>
</div>
</td>
</tr>
</table>
</td>
<!--<td>{{ibill}}</td>-->
</tr>
<!-- <tr>
<td><div collapse="ibill.isCollapsed">
<div class="well well-large">Some content</div>
</div></td>
</tr>-->
</tbody>
</table>
I'm pretty much e
<table>
<thead></thead>
<tbody>
<tr>
<td></td>
</tbody>
</table>
Is it possible to do the same with a table-less design (eliminating two tables per row)
You could just use the colspan attribute on a td to achieve the same effect without the tables. Ex:
<table>
<tbody>
<tr> <!--normal row stuff-->
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan='4'><!--details stuff here--></td>
</tr>
</tbody>
</table>
In this example, the td with colspan='4' will be a single cell that is the same width as the 4 cells in the previous row.