this question may be duplicate but I did not got solution for my requirement.
I need a help to have fixed/freeze header and few first columns for table inside
the scrollable div element. The data is dynamic as i columns and rows may increase or decrease depends of Data source. Currently it having ~86 rows and ~55 columns. The columns width is dynamic based on data.
My HTML code looks as below.
<html>
<body ng-app="myapp" ng-controller="mycontroller">
<table style="width:100%; height:90%">
<tr>
<td width=3%> </td>
<td>
<table style="width:100%;">
<tr>
<td>Page header</td>
</tr>
<tr><td></td></tr>
</table>
<table style="width:100%; height:90%">
<tr>
<td>
<div ng-style="{'width': twidth + 'px', 'heigth':theight + 'px','overflow-x': 'auto','overflow-y': 'auto'}">
<table>
<thead ng-repeat="h in dummy| limitTo:1">
<tr>
<th ng-repeat="(key, val) in h">
{{key}}
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="h in dummy">
<td ng-repeat="(key, val) in h">{{val}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
Related
If there is an overlapping join on different rows of the table, then the row may disappear:
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
</tr>
</tbody>
</table>
This is unacceptable. May have to abandon the "table" tag. What to do?
It's not 100% clear what you mean. But I've removed the rowspan's and added colspan's to the code. Colspan will span your cell over multiple columns/cells.
More info can be found here:
https://www.w3schools.com/tags/att_td_colspan.asp
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td>
<div>R1C1:R2C1 (row 1)</div>
</td>
<td>
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R2C2:R3C2 (row 2)</div>
</td>
</tr>
<tr>
<td colspan="2">
<div>R3C1 (row 3)</div>
</td>
</tr>
</tbody>
</table>
You've included two td elements on the first row of your table, but only one td element on the second and third rows of your table, which will break your table layout - the browser doesn't know which column the cell is supposed to span. Fix this and your table should work.
There a couple of problems:
Table wrongly formatted (make sure the number of td matches, even if they are empty)
<table>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
Styles wrongly applied (apply them by using <style> or referencing a stylesheet)
<table style="color:white;background-color:black;">
Extra: Don't use so many divs
While there isn't exactly a problem with using the divs you are using, using too many of them will usually lead to bad practices.
You can use some CSS tricks to hide border of last column so that the table is aligned as per your requirement.
table td.last {
border-left: hidden;
border-top:hidden;
}
table td.last2 {
border-left: hidden;
border-bottom:hidden
}
<table border="1" bordercolor="#999" cellspacing="0px" cellpadding="2px" width="100%">
<tbody>
<tr>
<td rowspan="2">
<div>R1C1:R2C1 (row 1)</div>
</td>
<td colspan="2">
<div>R1C2 (row 1)</div>
</td>
</tr>
<tr>
<td rowspan="2" style="border-right:hidden">
<div>R2C2:R3C2 (row 2)</div>
</td>
<td class="last2"><br></td>
</tr>
<tr>
<td>
<div>R3C1 (row 3 should not be here)</div>
</td>
<td class="last"><br></td>
</tr>
</tbody>
</table>
I'm working with a html table that's generated dynamically and trying to place an icon/image in a column on the left side that spans the length of multiple table rows. In my example, I would like to place a single image in the colored shaded areas. This needs to be done using html & css. I'll be using the same icon in each block:
Here's a sample of the table structure:
<table border="0">
<tbody>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
Here's my icon div that needs to go in the shaded areas:
<div class="icon"><i class="far fa-newspaper"></i></div>
Obviously, this ain't gonna work:
<table border="0">
<tbody>
<div class="icon"><i class="far fa-newspaper"></i>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
</div>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
td {
width: 100px;
background: green;
}
<table>
<tr>
<td rowspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
You could use rowspan from table to span multiple rows.
I have a table structure like this
And the html structure is this
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div><!-- Tree structure is loaded here dynamically --></div>
</td>
</tr>
<tr>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
If you see the image, the Operations columns height is adjusting itself based on the Hierarchy columns height, I am looking for some way if possible to have the heights of operation column fixed say 10px and whatever space is left the last row's operation column should consume it.
So the operations column will not looke weird having so much height.
Is it possible?
the approach you are using is correct, you can use rowspan="2" on the last row as shown in my snippet.
table {height: 600px}
table td {border:1px solid red; vertical-align:top}
td.history-text {height: 20px}
<table class="table table-bordered">
<thead>
<tr>
<th>Hierarchy</th>
<th>Operations</th>
</tr>
</thead>
<tbody>
<tr>
<td class="history-hierarchy" rowspan="4">
<div>Tree structure is loaded here dynamically</div>
</td>
<td class="history-text">
Equipment A700/005 is added.
</td>
</tr>
<tr>
<td class="history-text">
System instance SYSI/0002 is added.
</td>
</tr>
<tr>
<td class="history-text" rowspan="2">
Equipment 7100/001 is replaced with 7100/002
</td>
</tr>
</tbody>
</table>
I have little problem in my web page. I use bootstrap 4 and in table box I set inside other table as in the picture below. How to make the height of table inside the same as the hieght of the box (td)?
html:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Browser:
Because the table have CSS attribute margin-bottom: 20px, you need to add an override CSS to remove this attribute:
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table table-no-margin" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
<style>
.table-no-margin { margin: 0 }
</style>
This is happening because your nested table has a margin-bottom of 1rem(default bootstrap css). override it that's it.
Working example
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<table class="table table-bordered">
<tbody>
<tr>
<td>REVERT</td>
<td>
<table class="table" style="height: 100%; margin-bottom:0px;">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
This question has been asked many times before, but I'll answer it specifically for your scenario. It's not an issue of removing padding/margins.
In order to get a 100% height table, it's container must also be 100% height. So in this case set the containing td to height: 100%...
Demo on Codeply
<td>REVERT</td>
<td style="padding:0;height: 100%;">
<table class="table" style="height: 100%">
<tbody>
<tr>
<td>Name</td>
<td>LONG TEXT</td>
</tr>
</tbody>
</table>
</td>
My 'anothertablebody' will increase in size depending on what the user enters, it can increase till it exceed the outer table, I don't want it like this.
I want the width to be fixed not by pixels, but according to the outer table.
For eg col1 I want it 10% of the outer column, col2 30% of the outer column n col3 60% of the outer column... how can it be done?
It would be good if I can also get what the 100% width in pixel...
<table width='90%'>
<tbody id='todobody'>
<tr>
<td valign='top' width='100%'> <--- this is the outer column
<div class='div1'>
<table>
<tbody id='atablebody'>
<tr>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</tbody>
<tbody id=anothertablebody'></tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
<table width='90%'>
<tbody id='todobody'>
<tr>
<td valign='top' width='100%'> <!-- this is the outer column-->
<div class='div1' style="width: 100%;">
<table width="100%">
<tbody id='atablebody'>
<tr>
<td width="10%">col1</td>
<td width="30%">col2</td>
<td>col3</td>
</tr>
</tbody>
<tbody id=anothertablebody'></tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
When you say width="100%", it means that particular tag should occupy 100% of the width available to it