I have made two tables, one of which does not fill the full width of the parent div.
Does anyone have a clue what's wrong? You will find below the JS fiddle code:
https://jsfiddle.net/factorbased/cps3Loa2/6
The issue seems to involve this part but I don't understand how to fix it:
<head>
<style>
table.ReturnsTable {
text-align: right;
width: 100%;
}
.tr_grey{background-color:#C0C0C0;}
.setheight{min-height: 100px; overflow: hidden;}
#pies3 div{float:left;}
#pies4 div{float:left;}
</style>
</head>
<body>
<div id="csvBar12" style="display: none;">
[wbcr_php_snippet id="972"]
</div>
<div id="pies3" class="setheight" width="100%">
<div id="chartdiv3" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Performance Statistics</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>3-Month Return (%)</td> <td id="b0"></td> <td id="b1"></td><td id="b2"></td> </tr>
<tr> <td>1-Year Return (%)</td> <td id="b3"></td> <td id="b4"></td> <td id="b5"></td> </tr>
<tr> <td>3-Year Return (%)</td> <td id="b6"></td> <td id="b7"></td><td id="b8"></td></tr>
<tr> <td>5-Year Return (%)</td> <td id="b9"></td> <td id="b10"></td> <td id="b11"></td> </tr>
</table></div>
</div>
<div id="pies4" class="setheight" width="100%">
<div id="chartdiv4" style="width: 500px; height: 300px; background-color: #FFFFFF;" ></div>
<div><table class="ReturnsTable" border="2">
<tr class="tr_grey"><td>Risk Measurements</td> <td>Portfolio</td> <td>Benchmark</td> <td>Difference</td> </tr>
<tr> <td>Standard Deviation (%)</td> <td id="b12"></td> <td id="b13"></td><td id="b14" ></td> </tr>
<tr> <td>Maximum Drawdown (%)</td> <td id="b15" ></td> <td id="b16" ></td> <td id="b17"></td> </tr>
<tr> <td>Sharpe Ratio</td> <td id="b18"></td> <td id="b19"></td><td id="b20"></td></tr>
<tr> <td>Index Correlation</td> <td id="b21"></td> <td id="b22"></td> <td id="b23"></td> </tr>
</table></div>
</div>
</body>
Many thanks,
Related
With the below html, I am not able to add width of td element
here table is wrapped with div and it's width is 200px and overflow-x is given.
<div class="scroll" style="width: 200px; overflow-x: overlay;">
<table class="scrollable">
<tbody>
<tr>
<td width="100" data-index="0" style="width: 118px;">-0.29%</td>
<td data-index="1">-0.26%</td>
<td data-index="2">-0.20%</td><td data-index="3">-0.15%</td>
<td data-index="4">-0.09%</td><td data-index="5">0.19%</td>
<td data-index="6">0.54%</td><td data-index="7">0.95%</td>
<td data-index="8">1.33%</td><td data-index="9">1.67%</td>
<td data-index="10">1.97%</td><td data-index="11">2.22%</td>
<td data-index="12">2.44%</td><td data-index="13">2.62%</td>
<td data-index="14">2.78%</td>
</tr>
</tbody>
</table>
</div>
Try changing the display property of <td> to display:inline-block.
Also you should add this table { width: max-content; } to your CSS so your table can fit all the <td> now that they are bigger.
table {
width: max-content;
}
td {
width: 100px;
display: inline-block;
}
<div class="scroll" style="
width: 200px;
overflow-x: auto;
">
<table class="scrollable">
<tbody>
<tr>
<td data-index="0">-0.29%</td>
<td data-index="1">-0.26%</td>
<td data-index="2">-0.20%</td>
<td data-index="3">-0.15%</td>
<td data-index="4">-0.09%</td>
<td data-index="5">0.19%</td>
<td data-index="6">0.54%</td>
<td data-index="7">0.95%</td>
<td data-index="8">1.33%</td>
<td data-index="9">1.67%</td>
<td data-index="10">1.97%</td>
<td data-index="11">2.22%</td>
<td data-index="12">2.44%</td>
<td data-index="13">2.62%</td>
<td data-index="14">2.78%</td>
</tr>
</tbody>
</table>
</div>
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 have tried different styles but I could not reach a solution,
I need to make it like:
However my code produce the output like follows:
I would like to give some space( same color with background) however either table goes up or does not work at all. I would be happy if someone can help .
here is my code :
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
<div class="container">
<div class="jumbotron">
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="white"></td>
</table>
</div>
<div class="white"> <table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class=""></td>
</table> </div> <br><br><br>
<div class="white">
<table>
<tr>
<td class=''></td>
<td class='magenta'></td>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<tr>
<td class="white"></td>
<td class="red"></td>
</table>
</div>
<div class="white">
<table>
<tr>
<td class='magenta'></td>
<td class="green"></td>
<tr>
<td class=""></td>
<td class="blue"></td>
<tr>
<td class="red"></td>
<td class="red"></td>
</table>
</div>
</div>
</div>
and CSS. almost none of the display ttypes did work or I am doing a fundamental mistake here
.jumbotron {
background: black;
display:flex;
height: 75vh;
justify-content: center;
align-items: center;
}
table {
width: 30px;
height: 30px;
}
td {
border:1px solid black;
}
jsfiddle: https://jsfiddle.net/m6ucyryb/
According to your requirement, You should use two table. The following code will create a table in HTML. So you have to use 2 times in a code.
<table>
</table>
The requirement contains 3 table row for each table, the following code will create a row in page, so the following code is added three times for each table:
<tr>
</tr>
And each row contains 4 table data. The following code will create one table data, so under each table row, the following code is used four times.
<td class='magenta'></td>
I think you you need some spacing between them, it can be added like giving a margin to an div element:
<div class = "margin"></div>
The final solution will be as follows:
table {
width: 30px;
height: 30px;
}
.margin {
margin-top:5px;
}
td {
border:1px solid black;
}
.red{
background-color:red;
}
.yellow{
background-color:yellow;
}
.green{
background-color:green;
}
.blue{
background-color:blue;
}
.white{
background-color:white;
}
.magenta{
background-color:magenta;
}
.cyan{
background-color:cyan;
}
.black{
background-color : Black;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="extension.css" />
</head>
<body>
<table>
<tr>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class='magenta'></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="yellow"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
<td class="white"></td>
</tr>
</table>
<div class = "margin"></div>
<table>
<tr>
<td class="white"></td>
<td class='magenta'></td>
<td class='magenta'></td>
<td class="green"></td>
</tr>
<tr>
<td class="yellow"></td>
<td class="blue"></td>
<td class="white"></td>
<td class="blue"></td>
</tr>
<tr>
<td class="white"></td>
<td class="red"></td>
<td class="red"></td>
<td class="red"></td>
</tr>
</table>
</body>
</html>
I have started to draw a table in HTML. I desired to draw
Observe that 2.2 starts at center of 1.1 and 3.1 starts at center of 2.2.
The code I wrote for this is
<table border="3" width="400" height="200">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
You can see the output. Can any one tell me why the output is not as i desired by suggesting the changes in the code. Thanks in advance.
After going through the comments I found that code is working fine in chrome. Problem is only in Firefox and Edge.
I think you will need to specify cell height in order to get this work.
table {
text-align:center;
border-collapse:collapse;
}
<table border="3" width="400" height="200">
<tr>
<td height="40" rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
Try this style
<style media="screen">
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
.center {
text-align: center;
}
</style>
and your code for table,
<table width="400" height="200">
<tr>
<td rowspan="2">
<div class="center"> 1.1 </div>
</td>
<td>
<div class="center"> 1.2 </div>
</td>
</tr>
<tr>
<td rowspan="2">
<div class="center"> 2.2 </div>
</td>
</tr>
<tr>
<td>
<div class="center"> 3.1 </div>
</td>
</tr>
<tr>
<td colspan="2">
<div class="center"> 4.1 </div>
</td>
</tr>
<table>
use border-collapse: collapse; to table style
try this code
table{
border-collapse: collapse;
}
td{
text-align:center;
}
<table border="3" width="500" height="300">
<tr>
<td rowspan="2">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="2">2.2</td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
your code is written fine for rowspans, check this if it helps
<table border="3" width="400" height="200">
<tr>
<td rowspan="3">1.1</td>
<td>1.2</td>
</tr>
<tr>
<td rowspan="3">2.2</td>
</tr>
<tr>
<td style="border: none;"></td>
</tr>
<tr>
<td>3.1</td>
</tr>
<tr>
<td colspan="2">4.1</td>
</tr>
<table>
please help me with this:
the whole code is given below:
HTML
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
Everything is fine till here. But, once I apply the below css, the width of the columns is getting messed up.
CSS
#grd thead, #grd tbody
{
display: block;
width: 100%;
}
Why the width is getting messed up and its becoming smaller in size. I have attached a sample image. Its happening exactly like the below:
#grd thead, #grd tbody
{
width: 100%;
}
<div id="user_list">
<table id="grd" style="width: 100%;">
<thead>
<tr>
<td style="width: 15%;">Name</td>
<td style="width: 15%;">Age</td>
<td style="width: 35%;">Address</td>
<td style="width: 35%;">Office Address</td>
</tr>
</thead>
<tbody>
<tr>
<td>Agnib</td>
<td>25</td>
<td>jhjhhsdj</td>
<td>wyeruyweryuwe</td>
<tr>
</tbody>
</table>
</div>
or
#grd thead, #grd tbody
{
width: 100%;
}
table
{
border:1px solid gray;
}
table tr td
{
border:1px solid gray;
}
DEMO FIDDLE
DEMO UPDATED
In css file just apply styles to complete table that is "#grd", no need to apply for individual elements like "#grd thead" and "#grd tbody".
Try this code once:
<table id="grd" style="width: 100%;" border=1>
<thead>
<tr><td></td>
<td style="width: 15%">Name</td>
<td style="width: 15%">Age</td>
<td style="width: 35%">Address</td>
<td style="width: 35%">Office Address</td>
</tr>
</thead>
<tbody>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
<tr><td></td>
<td style="width: 15%">Agnib</td>
<td style="width: 15%">25</td>
<td style="width: 35%">jhjhhsdj</td>
<td style="width: 35%">wyeruyweryuwe</td>
<tr>
</tbody>
</table>