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>
Related
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>
I am using the following HTML/Razor to create a details row for when the user clicks the Run App button. The primary row is 4 columns wide, and the details row spans the 4 columns.
Detail Row Hidden
Detail visible
Here the detail row causes the table to expand really weirdly, it's way to large. It's not center either for some reason.
Small Table looks correct
It all looks fine when I reduce the size of the table. It's centered correctly and doesn't look super wide.
This is the HTML and a Fiddle
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-hover table-responsive">
<thead>
<tr>
<th>Components</th>
<th>Name</th>
<th>Description</th>
<th>Options</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Access,Querying</td>
<td>Basic Querying</td>
<td>Executes a stored procedure, fetching a single result set, without sending data in to the database.</td>
<td>
<button type="button" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e" data-vm-required="False" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="5625ad80-a1c7-4dfd-baeb-744d4de5292e">
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
<table class="table table-responsive">
<tbody>
<tr>
<th>PostalCode</th>
<th>City</th>
<th>AddressLine2</th>
<th>AddressLine1</th>
<th>AddressID</th>
</tr>
<tr>
<td>98011</td>
<td>Both</td>
<td></td>
<td>1970 Napa Ct.</td>
<td>1</td>
</tr>
<tr>
<td>98018</td>
<td>Bothell68</td>
<td></td>
<td>9833 Mt. Dias Blv.686</td>
<td>2</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>7484 Roundtree Drive</td>
<td>3</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>9539 Glenside Dr</td>
<td>4</td>
</tr>
<tr>
<td>85323</td>
<td>Phoenix</td>
<td></td>
<td>1226 Shoe St.</td>
<td>5</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>1399 Firestone Drive</td>
<td>6</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>5672 Hale Dr.</td>
<td>7</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>6387 Scenic Avenue</td>
<td>8</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>8713 Yosemite Ct.</td>
<td>9</td>
</tr>
<tr>
<td>98011</td>
<td>Bothell</td>
<td></td>
<td>250 Race Court</td>
<td>10</td>
</tr>
</tbody>
</table>
</span>
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>Data Access,Querying</td>
<td>Parameterized Query</td>
<td>Executes a stored procedure, fetching a single result set, filtered by a City passed into the stored procedure.</td>
<td>
<button type="button" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75" data-vm-required="True" data-app-name="Parameterized Query" data-toggle="modal" data-target="#appParameters" class="btn btn-success">
Run App
</button>
</td>
</tr>
<tr class="hidden">
<td colspan="4">
<div class="container">
<div class="alert alert-info" data-app="544abdf8-3685-4865-84f5-3d8fd132dd75">
</div>
</div>
</td>
</tr>
</tbody>
</table>
What am I doing wrong with the table that's causing it to not look like the way it does at the smaller Window scale?
Remove container class here and it will work normally.
<div class="container">
<span>
1000 items returned. Only showing the first 10 results.
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.
I have three tables. When they are all filled with data (10 rows) they look fine. See picture
When, however, the max capacity (i.e. 10 rows) hasn't been reached, the tables gets centered.
I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this
<table width="100%">
<tr>
<td>
<table id="SomeTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev1"><<</button>
<button id="next1">>></button>
<button id="create1">Create</button>
</td>
<td>
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
<td>
<table id="OtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev3"><<</button>
<button id="next3">>></button>
</td>
</tr>
</table>
Hi now add td valign="top"
As like this
<td valign="top">
or
Used in
css
td{
vertical-align:top;
}
Simply add this to your first TR:
<tr valign="top"></tr>
add style
td { vertical-align: top;}
try this
<td valign="top">
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>