Hello I need a fluid table with other div in the same line. Here you can see a fiddle where I could do what I want, which works perfectly on Chrome. The problem is when I try it on Firefox. The column width is the minimum, it is not expanding as in Chrome.
<div class="container" style="background-color: lightgray; overflow: auto;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px; float: left;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
REmove float : left and also the overflow: auto on top you don 't need
<div class="container" style="background-color: lightgray;">
<div style="height: 200px; overflow-y: auto; margin-right: 300px;">
<table border="1" style="">
<theader>
<tr>
<th>ID</th>
<th style="width:100%">Name</th>
<th>Time</th>
</tr>
</theader>
<tbody>
<tr>
<td>1</td>
<td style="word-break: break-all">Dan</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>2</td>
<td style="word-break: break-all">Bob</td>
<td>00:00:00.000</td>
</tr>
<tr>
<td>3</td>
<td style="word-break: break-all">Jenn</td>
<td>00:00:00.000</td>
</tr>
</tbody>
</table>
</div>
<div style="background-color: #65de4f80; width: 300px; height: 200px; margin-left: -300px; float: left;"></div>
</div>
Regards
Related
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 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'm struggling with TABLE HTML.
I have no idea why this table tag doesn't work properly in browser
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
<td rowspan="3">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">1-3</td>
</tr>
</tbody>
</table>
The html above would be rendered like this
However the view I expected to see is like this
As I figured out, If I want to see what I want in browser, I should fix rowspans like this
<table border="1">
<tbody>
<tr>
<td rowspan="1">1-1</td>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-2</td>
</tr>
<tr>
<td rowspan="1">1-3</td>
</tr>
</tbody>
</table>
But I'm really wondering what's different and why The browser (Chrome) doesn't render the first one properly and does the second one.
According to W3C there is no way to specify float value like 1.5 for rowspan but some tweaks like below may help.
<table border="1">
<tbody>
<tr>
<td rowspan="2">1-1</td>
</tr>
<tr>
<td rowspan="2">1-2</td>
</tr>
<tr>
<td rowspan="2">2-1</td>
</tr>
<tr>
<td rowspan="3">2-2</td>
</tr>
<tr>
<td rowspan="2">3-1</td>
</tr>
</tbody>
</table>
Have you tried flexbox yet? It is little bit different approach to solve this.
#main {
width: 100px;
height: 150px;
border: 1px solid #c3c3c3;
align-items: stretch;
display: flex;
flex-flow: column wrap;
}
#main div {
width: 50px;
height: 50px;
line-height: 45px;
text-align: center;
}
#right {
width: 50px;
height: 150px;
}
#right div {
width: 50px;
height: 75px;
line-height: 70px;
text-align: center;
}
<div id="main">
<div style="background-color:lightgrey;" >1-1</div>
<div style="background-color:grey;">1-2</div>
<div style="background-color:lightgrey;">1-3</div>
<div id="right">
<div id="right" style="background-color:lightblue;">2-1</div>
<div id="right" style="background-color:lightgreen;">2-2</div>
</div>
</div>
I must modify some legacy code that uses the deprecated way to layout a page with <table>.
The expected layout should be:
-------------------------|^|
row1,col1 |---------| | X: a long 2nd inner table
---------------|---------| | S: a vertical scroll bar
row2,col1 |-----X---|S|
---------------|---------| |
row3,col1 |---------| |
---------------|---------|_|
row4,col1 | row4,col2 |
---------------------------|
row5,col1 | row5,col2 |
---------------------------|
Where the rows must be o a fixed height and the [X] content (that spans on 3 rows), should then have a vertical scroll bar.
Here a sample code. Anyhow it doesn't keep the rows at a fixed height, neither it shows the scroll bar, it just enlarges the external table to fit the long internal one:
<html>
<body>
<table border="1" style="width: 100%; height: 400px;">
<tbody>
<tr style="width: 100%; height: 55px;">
<td style="vertical-align: top; width: 75%; height: 40px;">row 1</td>
<td style="width: 20%; height: 55px;" rowspan="3">
<div style="height 55px; overflow: scroll;">
<table border="1" cellpadding="0" cellspacing="0" style="width: 90%; height: 90px;">
<tbody>
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td></tr>
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
<!-- ... -->
<!-- Many other similar rows here -->
<!-- ... -->
<tr> <td>AAAAAAAAAAA</td> <td>1</td> <td >2</td> </tr>
</tbody>
</table>
</div>
</td></tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 2</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 3</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 4</td> </tr>
<tr style="vertical-align: top; height: 30px"> <td style="height: 20px">row 5</td> </tr>
</tbody>
</table>
<div>2016 - bottom line</div>
</body></html>
Any suggestion is really welcome.
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>