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>
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 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,
I am trying to get the section status colors in the webgrid and divide it percentage wise but it is not working for some of the rows
The webgrid cshtml script for section status is written below.
webGrid.Column(header: "Section Status", format: #
<table class="" cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="#item.InProgressPC%" title="#item.InProgressPC%"></td>
<td id="respPendingwd" width="#item.ResponsePendingPC%" title="#item.ResponsePendingPC%"></td>
<td id="revPendingwd" width="#item.ReviewPendingPC%" title="#item.ReviewPendingPC%"></td>
<td id="acceptedwd" width="#item.AcceptedPC%" title="#item.AcceptedPC%"></td>
<td id="rejectedwd" width="#item.RejectedPC%" title="#item.RejectedPC%"></td>
<td id="ftReciverwd" width="#item.FwdToRecieverPC%" title="#item.FwdToRecieverPC%"></td>
</tr>
</tbody>
</table>
, style: "SectionStatus"),
The color should be shown in % wise and for zero % the color should not appear in the grid.As shown the image only 4 status color should appear as 4 have percentage values of 25. But 5 colors are showing up for the highlighted row
table-layout: fixed should fix your problem, however sometimes there still is a 1px wide cell if you use the html width attribute instead of css.
table {
table-layout: fixed;
}
tr > td#inProgresswd {
background: #faa;
}
tr > td#respPendingwd {
background: #afa;
}
tr > td#revPendingwd {
background: #aaf;
}
tr > td#acceptedwd {
background: #ffa;
}
tr > td#rejectedwd {
background: #aff;
}
tr > td#ftReciverwd {
background: #faf;
}
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" width="25%" title="25%"></td>
<td id="respPendingwd" width="0%" title="0%"></td>
<td id="revPendingwd" width="0%" title="0%"></td>
<td id="acceptedwd" width="25%" title="25%"></td>
<td id="rejectedwd" width="25%" title="25%"></td>
<td id="ftReciverwd" width="25%" title="25%"></td>
</tr>
</tbody>
</table>
<br />
<table cellpadding="5" cellspacing="0" style="width: 100%;">
<tbody>
<tr>
<td id="inProgresswd" style="width: 25%;" title="25%"></td>
<td id="respPendingwd" style="width: 0%;" title="0%"></td>
<td id="revPendingwd" style="width: 0%;" title="0%"></td>
<td id="acceptedwd" style="width: 25%;" title="25%"></td>
<td id="rejectedwd" style="width: 25%;" title="25%"></td>
<td id="ftReciverwd" style="width: 25%;" title="25%"></td>
</tr>
</tbody>
</table>
I want to create a table with stuff in it like this:
What I have right now:
<table class="table">
<td>
<tr>
<div style="width: 100px;height:100px; background-color: blue;"></div>
</tr>
<tr>
<div style="width: 100px;height:100px; background-color: red;"></div>
</tr>
</td>
<td>
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</table>
Use rowspan, and td cannot be direct child of a table.
table {
border-collapse: collapse;
}
td {
width: 100px;
text-align: center;
vertical-align: middle;
}
.blue {
background-color: royalblue;
height: 100px;
}
.yellow {
background-color: yellow;
height: 200px;
}
.red {
background-color: red;
height: 100px;
}
<table>
<tr>
<td class="blue">1</td>
<td class="yellow" rowspan="2">3</td>
</tr>
<tr>
<td class="red">2</td>
</tr>
</table>
Well, firstly, your table syntax is off. It should look like this.
<table>
<tr>
<td> </td>
</tr>
</table>
Next, what you want is the first row to have two columns, with the second column taking up the space of two rows. The next row will have one column. This can be done using rowspan.
Here's your refactored code.
<table class="table">
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: blue;"></div>
</td>
<td rowspan="2">
<div style="width: 100px;height:200px; background-color: yellow;"></div>
</td>
</tr>
<tr>
<td rowspan="1">
<div style="width: 100px;height:100px; background-color: red;"></div>
</td>
</tr>
</table>
Your code must like this: use rowspan for second td
<table cellpadding="0" cellspacing="0">
<tr>
<td style="width: 100px;height:100px; background-color: blue;"></td>
<td rowspan="2" style="width: 100px;height:200px; background-color: yellow;"></td>
</tr>
<tr>
<td style="width: 100px;height:100px; background-color: red;"></td>
</tr>
</table>
</tr>
</table>
I managed to kinda achieve my intended design but it feels kinda like a hack.
So I'm working with this table and now cell size looks exactly as I'd like it to be, but I have to add extra row on top of my table (and hide it, but not in example so it's easier to understand). So if you try and delete that top row you can see how it all gets messed up (description fields don't look the same).
http://jsfiddle.net/nooorz24/cea57mhd/4/
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<tr>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
<td style="width: 1px;"></td>
<td style="width: 10000px;"></td>
</tr>
<tr>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;" colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td style="width: 1px;">IMG</td>
<td style="width: 10000px;">Description text</td>
</tr>
</table>
As far as I can understand it's because I try to set width to a cell that has colspan="2" and html doesn't understand how to work with that.
Can this be solved without adding extra row?
You can use the HTML col element which is designed just for that: styling or defining common attributes for an entire column.
table {
width: 100%;
}
table td {
border: 1px solid black;
}
<table>
<colgroup>
<col style="width: 1px">
<col style="width: 10000px;">
<col style="width: 1px">
<col style="width: 10000px;">
</colgroup>
<tr>
<td>IMG</td>
<td colspan="2">Description text</td>
<td></td>
</tr>
<tr>
<td colspan="2"></td>
<td>IMG</td>
<td>Description text</td>
</tr>
</table>