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.
Related
I have this in HTML.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">mid<br>middle<br>middddle</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Looks like so
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
But I want this
------------------------------------------
| mid |
left | middle | right
| middddle |
------------------------------------------
How can I get there with CSS??
EDIT: added with checkbox instead of simple text
Solutions with justify-content works like a charm - but with a checkbox the seems to be ignored. I replaced for example the checkbox with a string cause I did not expect to have it behave different - I was wrong.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;"><span style="display:flex; justify-content: center;"><input type="checkbox"/>mid<br><input type="checkbox"/>middle<br><input type="checkbox"/>middddle</span></td>
<td style="text-align: right;">right</td>
</tr>
</table>
The below code will help you with your requirement.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%; text-align: center;">
<span style="text-align: left; display: inline-block;">mid<br>middle<br>middddle</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
You can assign to the middle td display:flex; and wrap your middle td content in a div container. Like that:
.m-td {
display: flex;
width: 100%;
flex-wrap: wrap;
justify-content: center;
}
.m-td div{
text-align: left;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
<div>
mid<br>middle<br>middddle
</div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
Update
Thank you for hint #NikeshKp. For some reasons try to avoid use flexbox in the table.
Don't use flex property on tables. If used on mailers it will not work
in some email service providers like outlook.
Here the answer without flex.
.m-td {
text-align: center;
}
.m-td div{
text-align: left;
display: inline-block;
}
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td class="m-td">
<div>
mid<br>middle<br>middddle
</div>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
You can achieve it like this. Hope that how you want it to look.
<table style="width: 100%;" border=1>
<tr>
<td style="width: 33%;">left</td>
<td style="width: 33%;">
<span style="display:flex; justify-content:center">
mid<br>middle<br>middddle
</span>
</td>
<td style="text-align: right;">right</td>
</tr>
</table>
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,
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
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 a simple html table where i am trying to get the body to extend to the end of the headers/table. I need it to have horizontal scroll only for the body and have fixed headers.
I have a fiddle here that shows the issue.
http://jsfiddle.net/ZbdZe/54/
<table border="1" width="100%">
<thead >
<tr>
<th id="th1" width="50%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
<tbody style="display: block; border: 1px solid green; height: 530px; overflow-y: scroll">
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
Right now it extendes only the first heading. I need it to extend the full width of the table with scroll. Thank you
This is to have fixed table header created by another table
Second table for the body of the table with scroll
table{
border-collapse:collapse;
width:100%
}
tbody{
border: 1px solid green;
table-layout: fixed;
}
div{
height: 66px; /*adjust table body*/
overflow-y: scroll
}
<table border="1">
<thead>
<tr>
<th id="th1" width="39%">first</th>
<th id="th2" width="50%" >last</th>
</tr>
</thead>
</table>
<div>
<table border=1>
<tbody>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
<tr>
<td headers="th1" >Hello</td>
<td headers="th2" >World</td>
</tr>
</tbody>
</table>
</div>