How can I create two independent containers with fixed headers and scrollable body like this i have manage to create fixed table headers but i couldn't create scrollable body that both can scroll same time at vertically and only one can scroll horizontally.
Left side tree table and gantt chart both can be scroll horizontally, but right side Gantt chart only scrolls vertically.
Please check my code below, i hace acchived almost what i want, but i neet to fix two things
1) Need to fix the Header on table B but without breaking horizontal scroll behavior
2) How can Make both A & B vertical scrolls can happen at syncrounasly at same time, like when someone scrolls Table A table b alsp needto be scroll at the same time in vertically only.
like this link http://www.bryntum.com/playpen/react/ (add some task to activate the scroll)
PLEASE CHECK THIS CODE SNIPPET IN FULL PAGE
th, td{
padding: 10px 20px;
width: 100px;
}
th{
background: #fff;
}
td{
background: #efefef;
}
.fl{
float: left;
}
.panel_body{
height: 200px;
width: 430px;
overflow: hidden;
overflow-y:scroll;
}
.panel_body.scroll_h{
overflow-x: scroll;
width: 300px;
height: 240px;
}
.scroll_h table{
width: 500px;
}
<div class="panel">
<div class="fl panel_left">
<header>
<table>
<thead>
<tr>
<th>Table A</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
</table>
</header>
<section class="panel_body">
<table>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</div>
<di class="fl panel_right">
<section class="panel_body scroll_h">
<table>
<thead>
<tr>
<th>Table B</th>
<th>Start</th>
<th>End</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>Start1</td>
<td>End1</td>
</tr>
<tr>
<td>Name2</td>
<td>Start2</td>
<td>End2</td>
</tr>
<tr>
<td>Name3</td>
<td>Start3</td>
<td>End3</td>
</tr>
<tr>
<td>Name4</td>
<td>Start4</td>
<td>End4</td>
</tr>
<tr>
<td>Name5</td>
<td>Start5</td>
<td>End5</td>
</tr>
<tr>
<td>Name6</td>
<td>Start6</td>
<td>End6</td>
</tr>
<tr>
<td>Name7</td>
<td>Start7</td>
<td>End7</td>
</tr>
<tr>
<td>Name8</td>
<td>Start8</td>
<td>End8</td>
</tr>
<tr>
<td>Name9</td>
<td>Start9</td>
<td>End9</td>
</tr>
<tr>
<td>Name10</td>
<td>Start10</td>
<td>End10</td>
</tr>
<tr>
<td>Name11</td>
<td>Start11</td>
<td>End11</td>
</tr>
<tr>
<td>Name12</td>
<td>Start12</td>
<td>End12</td>
</tr>
<tr>
<td>Name13</td>
<td>Start13</td>
<td>End13</td>
</tr>
<tr>
<td>Name14</td>
<td>Start14</td>
<td>End14</td>
</tr>
<tr>
<td>Name15</td>
<td>Start15</td>
<td>End15</td>
</tr>
<tr>
<td>Name16</td>
<td>Start16</td>
<td>End16</td>
</tr>
<tr>
<td>Name17</td>
<td>Start17</td>
<td>End17</td>
</tr>
<tr>
<td>Name18</td>
<td>Start18</td>
<td>End18</td>
</tr>
<tr>
<td>Name19</td>
<td>Start19</td>
<td>End19</td>
</tr>
<tr>
<td>Name20</td>
<td>Start20</td>
<td>End20</td>
</tr>
</tbody>
</table>
</section>
</di>
</div>
With css and | or Js.
Define a width and height to the scrollable element.
Then use the overflow property:
#container {
width: 200px;
height: 200px;
overflow: scroll;
}
#container div {
width: 100%;
height: inherit;
}
#a { background: cornflowerblue; }
#b { background: brown; }
<div id="container">
<div id="a"></div>
<div id="b"></div>
</div>
You can set a horizontal/vertical scroll with overflow-x/overflow-y.
see MDN - overflow
PS: but please search for existing questions (and answers), post some code,etc. Here's an example but it will never fit your actual project.
Related
I need some CSS/jQuery gurus here.
Basically, there are 2 parent divs sitting side by side. First parent div contain a picture and below it contain a table.
Second parent div contain only a table with the style position: absolute;.
Now the thing is, the picture is different in height, so that means the position of the table below it gonna change.
Thus, how can I made the table on the 2nd div align the same with the first table, without changing the HTML structure. Is it possible doing it with jQuery, like grabbing the 1st table position, and apply it to the 2nd table?
Basically here's the structure is:
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
}
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
You could use jquery for this, yes. Something like:
var test = $( ".shop_attributes1" );
var position = test.position();
$('.second-table').css('top', position.top);
Here is a jsfiddle of this: https://jsfiddle.net/7wvjra83/1/
Basically you take the position of the first table and set the css for the second one to be aligned. Hope this works for you
I am not too sure if it is what you are looking for, however I hope it could helps:
$('.second-table').css('left', 361);
.picture {
background-color: #000;
width: 550px;
}
.second-table {
position: absolute;
top: 385px;
----------
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div1" style = "width: 30%; display: inline-block;">
<div class="picture" style="height: 378px;">
</div>
<table class="shop_attributes1" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
<div class="div2" style = "width: 50%; display: inline-block;">
<table class="shop_attributes2 second-table" style="background-color: #686868; margin-top: 30px;">
<tbody><tr class="">
<th>Model</th>
<td><p>Legend Diver</p>
</td>
</tr>
<tr class="alt">
<th>Reference</th>
<td><p>L3.674.4.50.0</p>
</td>
</tr>
<tr class="">
<th>Gender</th>
<td><p>Mens</p>
</td>
</tr>
<tr class="alt">
<th>Case Size</th>
<td><p>42.0 mm</p>
</td>
</tr>
<tr class="">
<th>Case Material</th>
<td><p>Stainless steel</p>
</tr>
</tbody></table>
</div>
I have a task where I am trying to align four tables in a page which is then printed.
But for some reason I am unable to align them with same height. I have a constraint to use only <table> <tr><td> structure.
Below is the current picture, because the data is variant in each table:
And I am trying to achieve is the below because no matter which table has how much data, all of them should be of equal height:
Any help would be great.
Take a look at flexboxes:
.wrapper {
display: flex;
}
table {
display: flex;
margin-left: 5px;
border: 1px solid #000000;
}
<div class="wrapper">
<table>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
<table>
<tr>
<td>Foo</td>
</tr>
<tr>
<td>Foo</td>
</tr>
</table>
</div>
Get each table's total number of rows. Then get the maximum from these numbers :
<script type="text/javascript">
function max(tab_num_rows) { // you put the numbers into an array
var ret = tab_num_rows[0];
for (var i=1 ; i<tab_num_rows.length; i++) {
if (ret < tab_num_rows[i])
ret = tab_num_rows[i];
}
return ret;
}
</script>
Then you make a JQuery to loop each table to add extra rows until the maximum is reached.
Flexbox will be the typical solution for this (see the other answer), however, if you are also restricted to NOT use flexbox (for example because of compatibility requirements to older browsers), you can put all four tables into the cells of one "wrapper table", like
.wrap {
width: 100%;
}
td {
background: #eee;
vertical-align: top;
}
<table class="wrap">
<tr>
<td>
<table>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
<tr>
<td>One</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
<tr>
<td>Two</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Three</td>
</tr>
<tr>
<td>Three</td>
</tr>
</table>
</td>
<td>
<table>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
<tr>
<td>Four</td>
</tr>
</table>
</td>
</tr>
</table>
I have a table with a horizontal scrollbar. I need to make the data of the first two rows sticky when horizontally scroll the table.
This is the table at the first place:
When I scroll I want "2016" and "Dec" to be displayed until I reach "2017" and "Jan", and the same for 2017 and Jan until I reach the next date.
This is the picture while scrolling:
and the picture when I reach the next date:
Please note that I don't want numbers to be sticky.
I already used scrollToFixed library for vertical scroll, but i'm not sure if it works in my situation.
Any hints will be appreciated.
You can do it using only css with position: sticky.
Note:
Putting .sticky on both th and the text to have the effect like this:
If you don't want the text to be cut, just remove class sticky on th.
.sticky {
position: sticky;
left: 0;
}
.table-wrapper {
max-width: 200px;
overflow-x: auto;
}
td {
min-width: 40px;
}
th {
padding: 0 5px;
background-color: white;
text-align: left;
}
<div class="table-wrapper">
<table>
<thead>
<tr>
<th class="sticky" colspan="10">
<span class="sticky">2016</span>
</th>
<th class="sticky" colspan="10">
<span class="sticky">2017</span>
</th>
</tr>
<tr>
<th class="sticky" colspan="10">
<span class="sticky">Dec</span>
</th>
<th class="sticky" colspan="10">
<span class="sticky">Jan</span>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
</div>
I made this block of code
<table>
{item.awards.map((obj,i) =>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
{i !== item.awards.length-1 ? <hr /> : ''}
</tbody>
)}
</table>
It worked, every block has a separator (<hr/>) but the problem now is the hr length is not full width. I can't make the table 100% as it will effect the td.
It's invalid to have an hr as a direct child of tbody. tbody's content model only allows tr elements (and scripts). Even if it seems to work in one browser, there's no guarantee it will in another, or even in the next dot rev of the one where it used to work.
So you need to put the hr in a tr, which means putting it in a td or th:
{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}
You can then style the hr as necessary with CSS to make it as wide as you like. For instance (note the sep class on the separator rows and the CSS it applies to the row and the hr):
table {
border: 1px solid #ddd;
}
.sep hr {
position: absolute;
width: 100%;
margin-top: -0.1em;
}
.sep {
position: relative;
overflow: hidden;
height: 1em;
}
<table>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
<tr class="sep">
<td colspan="3">
<hr />
</td>
</tr>
</tbody>
<tbody>
<tr>
<td>Name</td>
<td>:</td>
<td>{obj.title}</td>
</tr>
<tr>
<td>Date</td>
<td>:</td>
<td>{obj.award}</td>
</tr>
</tbody>
</table>
(Side note: null is a better choice than '' for the third operand of that conditional operator.)
I am trying to render a React table that has no borders but has rounded edges. I tried using border-collapse: collapse, which removed the borders that were appearing between columns in the table, but it also removed the border-radius property I had set. Does anyone have an idea as to how to accomplish this?
Here is how I am styling the table. Note I do not specify borders anywhere, but they are still appearing.
moduleSection {
border-radius: 4px;
background-color: #fff;
}
And here is how I create the table in my JS file:
renderRow = (item) => {
return (
<tr key={item.id}>
<td>
{item.name}
</td>
<td>
<div>
{item.status}
</div>
</td>
</tr>
);
}
render() {
const items = this.props.items;
return (
<table className={styles.moduleSection}>
<thead>
<tr>
<th>
<div>
Your Items
</div>
</th>
<th>
<div>
Item Status
</div>
</th>
</tr>
</thead>
<tbody>{items.map(this.renderRow)}</tbody>
</table>
);
}
Try changing
border-radius = 4px; to border-radius:4px;
and add
border:none;
Here's an example using a wrapper div :
<div style="display: table;
padding: 2px;
border-radius: 5px;
border: 1px solid #999;">
<TABLE style="border-collapse: collapse;">
<THEAD>
<TR style="background-color: red;">
<TH>Weekday</TH>
<TH>Date</TH>
<TH>Manager</TH>
<TH>Qty</TH>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>Mon</TD>
<TD>09/11</TD>
<TD>Kelsey</TD>
<TD>639</TD>
</TR>
<TR>
<TD>Tue</TD>
<TD>09/12</TD>
<TD>Lindsey</TD>
<TD>596</TD>
</TR>
<TR>
<TD>Sun</TD>
<TD>09/17</TD>
<TD>Susan</TD>
<TD>272</TD>
</TR>
</TBODY>
</TABLE>
</div>
Note: display:table; is not supported in IE7 and earlier. IE8 requires a: !DOCTYPE in the document. All modern browsers (including IE9) support it though, so it shouldn't be a problem.
Here is a table with the css working. You must be having some conflicting css that overrides these styles. This is exactly as you posted in the question. And it seems to be working. See the fiddle.
Sample HTML:
<table class="moduleSection">
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
<tr>
<td>
testing
</td>
<td>
table
</td>
</tr>
</table>
CSS:
.moduleSection {
border-radius: 10px;
background-color: #fff;
}
See this fiddle:
https://jsfiddle.net/8s8jnmw7/
And it even works with border collapse added:
https://jsfiddle.net/8s8jnmw7/1/
I have tested this in chrome, firefox and IE Edge.