Table has columns, which overflow the table width. Thus table has horizontal scroll, and cells are scrolled horizontally.
Under some regular row with some number of cells, table has row with cell, which takes 100% width of the row, and contains a button 'Show more' .i.e.
<tr>
<td colspan='100%'>
<button>Show more</button>
<td>
</tr>
Button should be centered (stick to center) on scroll. Also row has specific left border (border: 2px solid yellow), which also should not be scrolled (visually row with border, but technically - sticky cell with border)
How to make that button centered relatively to viewport? And not to use JS?
Now I have a working example with column position: sticky and colspan='4', and button is centered inside that sticky cell. But it's not centered according to viewport.
<tr>
<td class='sticky' colspan="4">
<button>
Show more
</button>
</td>
<td class='red' colspan="100%"></td>
</tr>
JSfiddle example
Related
I need to display a table like this, but have the rows all be the same height even though the images in the table have varying sizes. The table needs to be responsive, so that everything resizes as the window size is changed.
The current code for each row is this:
<tr width="100%" height="10%" style="background-color:rgba(158,158,158,1); color: #FFFFFF">
<td width="25%" style="margin:0; padding:4" align="left">Wed <b>Sep 29</b></td>
<td width="100%" style="padding:4;display:flex; align-items:center; justify-content: center;" align="center"># <img src="https://upload.wikimedia.org/wikipedia/commons/8/81/Pittsburgh_Pirates_logo_2014.svg" width="15%" style="padding:4"> Pirates</td>
<td width="25%" style="padding:4;margin:0" align="right">6:35 PM</td>
</tr>
And the full code is here.
The problem with this is that the row sizes vary depending on the size of the logo. You can see that the logo for the Pirates is larger than the logo for the Cardinals, so the row height is taller for the Pirates.
I have succeeded in resizing the logo to be the same height as the row, based on this answer. This involved positioning the logo absolutely, though. The code for this is here (see the 7th row where I made the change). The problem with this approach is then that I can't figure out how to display the text (the # symbol and the team name) together inline with the team logo. Obviously I can't use display inline block because I've positioned the logo absolutely. So, my question is: how can I resize the team logo to be the height of the row while also displaying the logo inline with the text (centered)?
Scrap the abspos approach.
For the all the img logos, remove width='15%' attribute.
Add a vh height property that changes with the height of the window, e.g.
<tr>
...
<img src="pirates.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
<tr>
...
<img src="reds.svg" style="padding:4; height: 10vh;"> Pirates</td>
...
</tr>
I am using the trick of assigning a small width to a table cell for it to wrap its content so the following works fine (I want the second and third cell to be assigned their width automatically according to their content):
<table style="width:100%;">
<tr>
<td style="width:1px;">11111111</td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width:1px;">11111111</td>
</tr>
</table>
But in my project, I am going to animate the width of the cell content to zero so I want the cell to be also of "0" width because I have a hover styling on the cell and even 1 px will trigger this styling when the mouse hovers over it. But assigning the cells 0 width instead of 1px is totally ignored.
One solution I thought of was binding the hover styling to the div inside the td. But is there a way to make the cell width really "0"?
try to use table-layout:fixed and width:0px on the td
<table style="width:100%;table-layout: fixed;">
<tr>
<td style="width: 0px;"> </td>
<td>1111111111111111</td>
<td>11111111</td>
<td style="width: 0px;"></td>
</tr>
</table>
I have a panelGrid to show information. When I insert one button in the first row, the rest of the rows move down. If I insert the button the rest of the rows don't must be moved. What CSS properties I need use.
A picture of my panel:
Shadowed row is the first row. Next picture show the second row:
And I want to my panel look like this:
I have used position:absolute over the button but my page is responsive and when I resize the page, this property crash responsive design. So what properties I need to use for get my goal? I am using Primefaces.
Regards
You'll need a div wrapper for your button, and the button to be floated inside so the div does not take extra height.
<table>
<tr class="first-row">
<td>
<div class="button-wrapper">
<a class="some-button">+</a>
</div>
First row
</td>
</tr>
<tr class="second-row">
<td>
Second row
</td>
</tr>
</table>
And the CSS:
.button-wrapper {
float: right;
height: 1px; // Fool the row by thinking that this div doesn't have height
}
.some-button {
float: right;
}
This way, when the navigator renders the row, it thinks that the div child has only 1 px, so it does not expand vertically.
Look at this example: https://jsfiddle.net/z2L715ev/2/
I currently have:
<div class="generic-block-70">
<div class="generic-content-70">
<table id="voteBlock">
// stuff
</table>
</div>
</div>
However, seeing as the generic-block-70 and generic-content-70 do not have a set height and they expand vertically as text is added, I can't simply set my table's style to height: 100%;.
Is there a way around this?
JSFiddle: http://jsfiddle.net/2vLEL/
Set overflow: auto; on your parent div.
http://jsfiddle.net/2vLEL/2/
.generic-content-70 {
overflow: auto;
}
I think I probably had a similar problem. This is how I solved it.
I have nested tables within tables.
Users clicked a button and Javascript created new table rows and cells and filled the cell with data from a form. In order to force the cell to wrap the text and not expand horizontally, I had to use a <div></div> tag inside the cell.
In order to force the "table" to NOT expand vertically as new table rows were added, I had to place <div></div> tags below the <td> containing the .
So, the html created from my javascript might look like this.
<table id="root">
<tr id="A">
<td id="1" style="width:200px">Content</td>
<td id="2" style="width:530px">
<div height="correct_height" overflowY="auto">
<table id="comments_table" style="width:510px table-layout:fixed">
<tr>
<td style="word-wrap:break-word">
<div style="width:480px;white-space:nowrap">Comments</div>
</td>
</tr>
</table>
</div>
</td>
</tr>
.
.
.
</table>
The first <td id="1"> is created by a function that runs first.
The second <td id="2"> is created by a function that runs after and it grabs the height of the <td id="1"> so that the height of the 2nd cell in the row is dependent on the height of the 1st cell in the row.
The widths are arranged as such to allow space for the vertical scroll bar to appear.
You have to subtract any padding that you use. For example if two of the elements have style="padding:5px" then that means 5top 5bottom x 2 elements. So:
var correct_height = A.offsetHeight - 20;
The code depends on the intention:
If you want to lock the table to a height, give it a height: NNpx;
If you want to lock the div to a height, give IT a height: NNpx; and an overflow: MM; depending on your needs
I have some text in table column which is greater than the column width I want. So text is overflowing from it. So I apply overflow:auto but in this case it is showing scroll on every page where data is less than the width of the column.
I don't want to show the scroll on that page where data is less than the width of column just want to show only where data is greater than its length.
Does any one have some suggestions?
<td style=" width:50%;overflow:auto;>
Try to wrap td content in div with fixed width and overflow: auto
For example:
<table>
<tr>
<td>some content</td>
<td> <!-- your fixed width column -->
<div style="width: 100px; overflow: scroll;">
Loremipsumdolorsitametconsectetuadipisicingelit
</div>
</td>
</tr>
</table>
use this <td style=" width:50%;overflow:scroll;">
This will insert horizontal and vertical scrollbars.
They will become active only if the content requires it.