I don't know how to put this in order to look the same table, I understand I need to code in base64 the images, but I don't know how to put those images in the json in order to shown the same way.
<div class="pt-3">
<table>
<tr>
<td><img src="https://d1yjjnpx0p53s8.cloudfront.net/styles/logo-thumbnail/s3/062013/huawei_0.jpg"
width="96" height="48"></td>
<td><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/170px-Apple_logo_black.svg.png" width="96"
height="48"></td>
</tr>
</table>
</div>
<hr>
<table>ILX A-SPEC 4P L4 2.4L QC NAVI R18 AUT 5 OCUP</table>
<table>
<tr>
<td><button mat-button>
<mat-icon>check_box_outline_blank</mat-icon>
</button></td>
<td><button mat-button>
<mat-icon>check_box_outline_blank</mat-icon>
</button></td>
</tr>
</table>
<hr>
<table>ILX A-SPEC 4P L4 2.4L QC</table>
<table>
<tr>
<td><button mat-button>
<mat-icon>check_box_outline_blank</mat-icon>
</button></td>
<td><button mat-button>
<mat-icon>check_box_outline_blank</mat-icon>
</button></td>
</tr>
</table>
<hr>
Related
I need to insert a button inside a cell in a table. This button should fit entirely the cell.
<td colspan="2" rowspan="2">
<button class="btn btn-default btn-block m-0" style="height:100%;">
Button
</button>
</td>
I tried the above code but the actual button it covers only the first row of the joined cells.
Is this what are you looking for?
The button row takes tha space of the below row as well
<table>
<thead></thead>
<tbody>
<tr>
<td>Lorem ipsum</td>
<td>dolor sit amet</td>
<td>test3</td>
</tr>
<tr>
<td colspan="2" rowspan="2">
<button class="btn btn-default btn-block m-0" style="height:100%;">
Button
</button>
</td>
<td>test3</td>
</tr>
<tr>
<td>Lorem ipsum</td>
<td>dolor sit amet</td>
<td>test3</td>
</tr>
</tbody>
</table>
I'm attempting to return two tr elements from a single component v-design-row. I know vue requires the template elements to be wrapped in a div, but I cannot wrap them in a div because of the tag structure html tables require. When I add the second tr in the v-design-row component then vue doesn't render anything.
Can anyone suggest the best method for accomplishing this?
main.vue
<table class="table">
<thead>
<th>Image</th>
<th>Name</th>
<th>Description</th>
<th>Status</th>
<th>Order</th>
<th>Edit</th>
<th>Delete</th>
</thead>
<tbody v-for="catagory in catagories">
<v-catagory-row :catagory="catagory"></v-catagory-row>
<v-design-row v-for="design in catagory.designs" :design="design"></v-design-row>
</tbody>
</table>
v-design-row.vue
<template>
<tr>
<td><img :src="design.image_directory" :alt="design.name"></td>
<td>{{ design.name }}</td>
<td>
<button class="btn btn-secondary" type="button" data-toggle="collapse" :data-target="'#' + design.identifier" aria-expanded="false" :aria-controls="design.identifier">
<i class="fa fa-plus" aria-hidden="true"></i> Show
</button>
</td>
<td>
<div class="switch">
<input :id="'active'+design.id" v-model="design.active" class="btn-toggle btn-toggle-round-flat" type="checkbox">
<label :for="'active'+design.id"></label>
</div>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-up" aria-hidden="true"></i>
</button>
<button class="btn btn-secondary" type="button">
<i class="fa fa-caret-down" aria-hidden="true"></i>
</button>
{{ design.sort_order }}
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-pencil" aria-hidden="true"></i>
</button>
</td>
<td>
<button class="btn btn-secondary" type="button">
<i class="fa fa-trash" aria-hidden="true"></i>
</button>
</td>
</tr>
<tr>
<td class="p-0" colspan="7">
<div class="collapse" :id="design.identifier">
<div class="p-3">
{{ design.description }}
</div>
</div>
</td>
</tr>
</template>
You are allowed to group row using multiple <tbody> sections like this:
<table>
<thead>
<tr> ... </tr>
</thead>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</table>
You can use this in templates by using a <tbody> as the root element:
<template>
<tbody>
<tr> ... </tr>
<tr> ... </tr>
</tbody>
</template>
Since second tr in your v-design-row contains description of design, I'd suggest that this is whole element and it should occupy one row and have its own layout.
Alternatively, you can have a description separately and all other data in component.
Also, statement
vue requires the template elements to be wrapped in a div
is not quite correct. Template can have any root element while it is a single element. So you can have
<template>
<tr>
</tr>
</template>
or even
<template>
<tr v-if="condition == 1">
</tr>
<tr v-else-if="condition == 2">
</tr>
<tr v-else>
</tr>
</template>
You can use vue-fragment library. It allows you to have wrapper that wont actually be rendered.
https://www.npmjs.com/package/vue-fragment
I'm currently making a template with Bootstrap 4. I have a table with four rows, here is the link to the said site: here.
Now with the CSS I have here for just the links:
a {
color: #F0FFFF;
}
a:visited {
color: #00FFFF;
}
a:hover {
text-decoration: none;
}
But at the fourth row, the fourth link does not follow the said CSS rules. My question is did I make a mistake on the CSS? Or does BootStrap 4 have a limit on Tables? With the BootStrap documentation, it shows examples of three rows only. Take a look here.
Here is the table HTML:
<table class="table table-striped table-inverse">
<thead>
<tr>
<th>Date</th>
<th>Area</th>
<th>Venue</th>
<th>Tickets</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">June 16, 2017</th>
<td>Auburn Hills, MI</td>
<td>Palace Of Auburn Hills</td>
<td><a href="#">
<button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 19, 2017</th>
<td>Los Angeles, CA</td>
<td>Los Angeles Memorial Coliseum </td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 23, 2017</th>
<td>Toyko, Japan</td>
<td>Nippon Budokan</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Tickets!!
</button></a>
</td>
</tr>
<tr>
<th scope="row">June 26, 2017</th>
<td>Hong Kong</td>
<td>Hong Kong Festival</td>
<td><button type="button" class="btn btn-primary btn-sm" data-toggle="button" aria-pressed="false" autocomplete="off">
Hey!
</button></a>
</td>
</tr>
</tbody>
</table>
I am trying to make table in which there are two show/hide buttons for two columns say A and B.. button a and b separately are functioning properly but If i use both in table ... only one of them functions properly other doesn't do anything.. pls hlp me i am new to this
<table datatable="ng" class="row-border hover table table-condensed no-margin">
<thead>
<tr>
<th>#</th>
<th>Username</th>>
<th>Profile</th>
<th>Points</th>
<th>Forcasts Won/Lost</th>
<th>Invites</th>
<th>Referrals</th>
<th>Activity</th>
<th>Most Used Redeemption Gateway</th>
<th>Most Read FAQ</th>
<th>Promo Codes used</th>
<th>Suspend/Unsuspend</th>
</tr>
</thead>
<tbody>
<tr ng-repeat-start="person in showCase.persons">
<td>{{person.id}}</td>
<td>{{person.uname}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Profexpanded" ng-click="person.Profexpanded = false;person.Invexpanded=false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Profexpanded" ng-click="person.Profexpanded = true;person.Invexpanded=false">Show</button>
</td>
<td>{{person.points}}</td>
<td>{{person.forcasts}}</td>
<td style="padding:5px">
<table><tbody>
<tr><td><b>sent: </b></td> <td>{{person.invites[0].sent}}</td></tr>
<tr><td><b>accepted:</b></td> <td>{{person.invites[0].accepted}}</td></tr>
</tbody></table>
</td>
<td>{{person.referrals}}</td>
<td>
<button type="button" class="btn btn-primary" ng-if="person.Invexpanded" ng-click="person.Invexpanded = false;person.Profexpanded = false">Hide</button>
<button type="button" class="btn btn-primary" ng-if="!person.Invexpanded" ng-click="person.Invexpanded = true;person.Profexpanded = false">Show</button>
</td>
<td>{{person.muredempt}}</td>
<td>{{person.mfaq}}</td>
<td>{{person.promocodes}}</td>
<td>{{person.isSuspended}}</td>
</tr>
<tr ng-if="person.Profexpanded" ng-repeat-end="">
<td class = "profile" colspan="5">
Hello A
</td>
</tr>
<tr ng-if="person.Invexpanded" ng-repeat-end="">
<td>Hello B</td>
</tr>
</tbody>
</table>
<!--end .card-body -->
</div>`
Maybe try ng-show instead ng-if <tr ng-show="person.Invexpanded" ng-repeat-end="">
Use
<tr ng-if="person.Profexpanded">
instead of
<tr ng-if="person.Profexpanded" ng-repeat-end="">
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.