I would like the lines to be much closer to each other, but margin and height are not working
<h4>TITLE:</h4>
<div style="width: 290px; display: table-cell;">
<h4>AAA</h4>
</div>
<div style="display: table-cell;">
<h4>€ 123</h4>
</div>
<br>
<div style="width: 290px; display: table-cell;">
<h4>BBB</h4>
</div>
<div style="display: table-cell;">
<h4>€ 123</h4>
</div>
Result:
There is almost a full line size between AAA and BBB. That's the issue.
Use table
<table class="table table-striped" style="width:100%; table-layout:fixed">
<thead class="table-head">
<tr>
<th text-align="center" colspan="2"><h4>TITLE:</h4></th>
</tr>
</thead>
<tbody>
<tr class="table-success" text-align="center">
<td style="text-align:center;vertical-align:middle">AAA</td>
<td style="text-align:center;vertical-align:middle">€ 123</td>
</tr>
<tr text-align="center">
<td style="text-align:center;vertical-align:middle">BBB</td>
<td style="text-align:center;vertical-align:middle">€ 123</td>
</tr>
</tbody>
</table>
Related
I want to extend inner table cell width as per parent table header
I tried this but how do i give inner table cell width as per parent header cell.
What i tried along with boottrap
<div class="table-responsive">
<table class="table table-sm table-bordered block-table">
<thead>
<th>Sr.</th>
<th>Product</th>
<th>Unit</th>
<th style="width: 15%">Serial Number</th>
<th>Date</th>
<th>Mac. Address</th>
<th>Batch No.</th>
<th>Qty</th>
<th>Std Pkg</th>
<th>Start Range</th>
<!-- <th>Assigned Quantity</th> -->
</thead>
<tbody>
<ng-container *ngFor="let inventory of inventoryList;let i=index">
<tr style="cursor: pointer;" (click)="toggleProductEntryTable(i)">
<td>{{i + 1}} </td>
<td> {{inventory?.displayString}} </td>
<td>{{inventory?.uomString}} </td>
<td colspan="7" style="padding: 0px">
<tbody>
<tr style="display: table-header-group" *ngFor="let productEntry of inventory.inventories;let proEnt=index">
<td style="display: table-cell;min-width: 160px"> {{productEntry?.subDetail?.serialNo}} </td>
<td style="display: table-cell;"> {{productEntry?.inventory?.date}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.macAddress}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.batchNo}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.consumed - productEntry?.checkoutDetail?.assignedCount}} </td>
<td style="display: table-cell;"> {{productEntry?.subDetail?.standardPackingQuntity}}</td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.startRange}} </td>
<td style="display: table-cell;"> {{productEntry?.checkoutDetail?.endRange}} </td>
</tr>
</tbody>
</td>
</tr>
</ng-container>
</tbody>
</table>
</div>
.block-table {
display: table;
overflow-x: scroll;
max-height: 448px;
margin-bottom: 0px;
}
Add colspan="2" with the number of columns you want it to span (looks like 10 in your case)
<!DOCTYPE html>
<html>
<head>
<style>
table,
th,
td {
border: 1px solid black;
}
</style>
</head>
<body>
<table>
<tr>
<th>Monthly Savings</th>
</tr>
<tr>
<td colspan="2">January</td>
</tr>
<tr>
<td colspan="2">February</td>
</tr>
</table>
</body>
</html>
I need to make 2 Tables with vertical alignment.
so I made 2 div which one is "col-lg-10", another one is "col-lg-5"
I think it works with 1-Table and Half-Table exactly
but it doesn't work exactly, it's a little bit different.
[col-lg-10 / col-lg-5] , I think 10 is exactly half value of 5....
why doesn't it work?
<div class="table-responsive col-lg-10">
<table class="table table-bordered">
<tr>
<td class="col-lg-1">ABC</td>
<td class="col-lg-1">DEF</td>
<td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
<td class="col-lg-1">342</td>
<td class="col-lg-1">ABc</td>
<td class="col-lg-1">DDF</td>
<td class="col-lg-1">AvV</td>
<td class="col-lg-1">DXZ</td>
<td class="col-lg-1">QQW</td>
</tr>
</table>
</div>
<div class="table-responsive col-lg-5">
<table class="table table-bordered">
<tr>
<td class="col-lg-2">ABC</td>
<td class="col-lg-3">DEF</td>
</tr>
</table>
</div>
Result ScreenShot
check the image this is regarding col*
here is the code after correction you can change the offset value as we want
<div class="row">
<div class="col-lg-10 col-md-10 col-md-10 offset-sm-1 col-sm-offset-2 col-md-offset-2">
<div class="table-responsive">
<table class="table table-bordered">
<tr class=row>
<td class="col-lg-1">ABC</td>
<td class="col-lg-1">DEF</td>
<td class="col-lg-2" style="word-break:break-all">FGGFGGFGGFGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGFGGG</td>
<td class="col-lg-1">342</td>
<td class="col-lg-1">ABc</td>
<td class="col-lg-1">DDF</td>
<td class="col-lg-1">AvV</td>
<td class="col-lg-1">DXZ</td>
<td class="col-lg-1">QQW</td>
<td class="col-lg-1">QQW</td>
<td class="col-lg-1">QQW</td>
</tr>
</table>
</div>
</div>
<div class="col-lg-5 offset-sm-4 ">
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<td class="col-lg-2">ABC</td>
<td class="col-lg-3">DEF</td>
</tr>
</table>
</div>
</div>
</div>
I need to make the picture to have a width on 100%, which means that the picture should fill out the white space, and align vertical with the text there is below.
My Example Site
The code is for email newsletters, therefore I am using foundation. I cannot find how I am doing that in the documentation, therefore I have to try something else.
How can I make the picture fill out the whitespace?
Relevant HTML code
<body>
<!-- Wrapper for the body of the email -->
<table class="body" data-made-with-foundation>
<tr>
<!-- The class, align, and <center> tag center the container -->
<td class="float-center" align="center" valign="top">
<center>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: blue;">
<table align="center" class="container">
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
<table>
<tr>
<th>
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: red;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: yellow;">
<table>
<tr>
<th>Here is all my text is gonna be. Here is all my text is gonna be.Here is all my text is gonna be.Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner" style="background-color: pink;">
<table align="center" class="container" >
<tbody>
<tr>
<td>
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="background-color: green;">
<table>
<tr>
<th>Here is all my text is gonna be.</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</center>
</td>
</tr>
</table>
</body>
Well, you have to modify two things.
First of all:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
And second: Original code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" width="100%">
</center>
Final code:
<center data-parsed="">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" alt="image of clever meme that made me chuckle" align="center" class="float-center" style="width:100%;">
</center>
My best regards!
Sure!, try this:
Original code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0;">
Final code:
<table class="row">
<tbody>
<tr>
<th class="small-12 large-12 columns first last" style="padding:0 !important;">
EDIT ** THIS WILL WORK **
Final version
Change the < img> to < div> with image background:
<th class="small-12 large-12 columns first last" style="padding: 0 !important;">
<table>
<tbody>
<tr>
<th>
<center>
<div style="background:blue url('http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg') no-repeat center; background-size:cover;" alt="image of clever meme that made me chuckle">
<img src="http://www.webdesignmo.com/blog/wp-content/uploads/2010/02/6_lion.jpg" style="display:hidden;">
</div>
</center>
</th>
</tr>
</tbody>
I have a table
There is a certain columns that I don't want my text to wrap/go to the next line, but I'm not sure how to prevent that.
Red
I don't want my text to go to the next line
Green
It's okay for it's data to wrap into the next line
HTML
<div class="row" style=" margin-right: 15px; margin-left: 15px;">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
<div id="piechart"></div>
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
<table class="table table-bordered piechart-key ">
<thead>
<th colspan="2" ></th>
<th>Item Summary</th>
<th>Item List</th>
</thead>
<tbody>
<tr>
<td width="22" ></td>
<td width="70" >Incorrect</td>
<td width="55" ><span id="pc-danger"></span>/50</td>
<td width="100" ><span id="pc-danger-list"></span></td>
</tr>
<tr>
<td width="22" ></td>
<td width="70" >Partially Correct</td>
<td width="55" ><span id="pc-warning"></span>/50</td>
<td width="100" ><span id="pc-warning-list"></span></td>
</tr>
<tr>
<td width="22" ></td>
<td width="70" >Correct</td>
<td width="55" ><span id="pc-success"></span>/50</td>
<td width="100" ><span id="pc-success-list"></span></td>
</tr>
</tbody>
</table>
</div>
</div>
I've also tried using the % as its width, but nothing seem to work.
How do I solve this problem ?
Any hints / helps will be much appreciated !
You can set nowrap on th and 2nd td in the table.
.piechart-key th,
.piechart-key td:nth-child(2) {
white-space: nowrap;
}
To force text to wrap in 4th td, you could do.
.piechart-key td:nth-child(4) {
word-break: break-all;
}
For width, suggest to remove width="100" on the 4th td.
UPDATED DEMO
th,
td {
white-space: nowrap;
}
td span {
white-space: normal;
}
<div class="row" style=" margin-right: 15px; margin-left: 15px;">
<div class="col-xs-4 col-sm-3 col-md-3 col-lg-2 ">
<div id="piechart"></div>
</div>
<div class="col-xs-8 col-sm-9 col-md-9 col-lg-10 ">
<table class="table table-bordered piechart-key ">
<thead>
<th colspan="2"></th>
<th>Item Summary</th>
<th>Item List</th>
</thead>
<tbody>
<tr>
<td width="22"></td>
<td width="70">Incorrect</td>
<td width="55"><span id="pc-danger"></span>/50</td>
<td width="100"><span id="pc-danger-list"></span>
</td>
</tr>
<tr>
<td width="22"></td>
<td width="120">Partially Correct</td>
<td width="55"><span id="pc-warning"></span>/50</td>
<td width="100"><span id="pc-warning-list"></span>
</td>
</tr>
<tr>
<td width="22"></td>
<td width="70">Correct</td>
<td width="55"><span id="pc-success"></span>/50</td>
<td width="100"><span id="pc-success-list">Item-inside Item-inside Item-inside</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
Here is my code:
<form id="form1" style="height: 800px; width:1000px" >
<table style="width: 90%; height: 193;">
<tr>
<td class="style4">
<table style="width: 100%; height: 701px;">
<tr>
<td style="height: 587px; width: 629px;" colspan="4" >
<div id="tableTree" style="height:600px;">
<table style="width: 150px;">
<div id="treeboxbox_tree" style="width:280px; height:100%; ">
</div>
</table>
</div>
</td>
</tr>
<tr>
<td >
<input type="button" value="Add" id="btnAdd" onclick="return someMethod()" />
</td>
<td >
//other button
</td>
<td >
//other button
</td>
</tr>
</table>
</td>
<div>
<td>
<table width="100%" id="smth">
<div style="float:left"><%Html.RenderPartial("Something"); %></div>
</table>
</td>
</div>
</tr>
</table>
</form>
And smth is not shown until I click on a button. But since smth has very large height, the td which has style4 goes down, where the middle of smth is. It is very frustrating. How to resolve it?
I think you mean the vertical alignment is off in the td?
<td class="style4">
Change it to
<td class="style4" valign="top">
Or add to style4
vertical-align: top;
Not sure which version of html you are defining...