http://74.52.155.226/~projtest/team/harmeet/reach/
That is the link i am working on. Its a responsive design. If you see down below the footer there is a table. When you reduce the resolution less than 600px or so the table layout changes. What i cannot do is make the test in first row ( in the small layout ) to have word-wrap as the text is going out of the table cell. Any help? Thanks in advance.
P.S.: you can search for the term "unlimited support" on the page and you will know which row i am talking about. I repeat, please reduce the browser size to see the issue.
Looking in firebug I can see that you have 'white-space: nowrap' on the tbody element, when in the narrower layout.
You can remove it, or set it to another value i.e. 'normal'
#rt1 tbody {
display: block;
overflow-x: auto;
position: relative;
table-layout: fixed;
white-space: nowrap;
width: 273px;
}
Related
I am trying to freeze table header and need to make scroll only table body. I referred this link. But it is fine for minimal number of columns. If increases, then thus the table data text is overlapping each other. this is major bug in my project. I tried lots. But its become useless. if you have any solution please comment it below or help with your answer.
Screen Shot (For Example):
Maybe you must set up a horizontal scroll for the whole table as it became larger than screen width and set each cell with a wrap property to avoid its content pass uppon the next. Try this:
.outer-div {
position: relative;
width: 1024px; //Or any default value for you.
overflow: auto;
}
.inner-div {
position: absolute;
width: 100%;
}
.cell-content {
word-wrap: break-word;
}
Remember to change the classes' names with yours. Cheers!
I'm trying to fix this issue for a friend. The website looks normal on a desktop, but when resized down to a mobile size, the footer overlaps with the content, where the footer doesn't stay at the very bottom of the page.
I've tried to play around inside inspector and CSS settings but nothing seems to work. Not sure what's going on.
Website: http://www.ijc.com.au/
Any input would be appreciated!
Your content is in table layout, please try to remove the height given to the table. please find the attached image
table {
height: auto;
}
The above-mentioned CSS will fix the issue with the footer on the website.
Check line number 652 on http://www.ijc.com.au/css/media-queries.css
Add height auto, you havent update the height on the table for the mobile devices.
table, thead, tbody, th, td, tr {
display: block;
width: 100%;
height: auto;
}
I have a table that has image in one of its column:
In Firefox and IE, the image always as big as the original size, making the td expands beyond it's specified width.
Here's the Codepen.
When creating the codepen, I realized that Chrome actually has the same issue, but fixed by this part of normalize.css:
img, object, embed {
max-width: 100%;
}
Some solution that I have found is adding table-layout: fixed on table. But it only fixes the issue if my table doesn't have checkbox. It behaves weirdly otherwise (you can try it on the Codepen).
Any other solution?
An easy fix for this would to target the images width as displayed below, versus targeting the width of the td tag:
CSS:
img {
border: 0;
display: inline-block;
vertical-align: middle;
width: 95%;
height: auto;
}
This is demonstrated in the following demo and should fix your problem with IE and FF browsers.
DEMO
So, i'm working on a website for a photographer friend of mine. I'm trying to create a responsive or 'fluid' grid (a table, 2 rows and 4 columns) as a sort of menu to link to his gallery.
The basic idea here is to have something like this:
(for some reason it let me upload this image but wont let me post it because i dont have 10 reputation so here is the link)
http://i.stack.imgur.com/wTntr.jpg
Only the white squares would obviously be replaced by the thumbnails for each gallery page.
Now there are 2 things that I want to happen with this layout. First and foremost I want this table to be fluid, which I can do using this css script:
#charset "utf-8";
/*************************/
/* Fluid Grid Album Menu */
/*************************/
#media
only screen and (max-width: 1020px
{
table, thread, tbody, th, td, tr {
display: block;
font-family: Calibri;
}
thread tr {
position: absolute;
}
tr { border: 0px; }
td {
border: none;
position: relative;
}
td:before {
position: relative;
padding: 10px;
}
I've never really used CSS before as I haven't really been much of a developer, so some of this is probably wrong or unnecessary so my apologies. Now this works fine and the grid does adapt to the page. The problem is when I try to add the next part.
On mouseover I want the image to grow slightly, so for this I used this code:
<img src="(image url)" width='240' height='164'
onMouseOver="this.width='255'; this.height='174.25'"
onMouseOut="this.width='240'; this.height='164'">
When I add this code in, one of two things will happen. If I have the image sizes exactly as they are there (in px) the image has the desired effect on mouseover, but on smaller devices this squashes the images width but the height remains fixed.
However, if I change the image sizes to % instead of px the images will resize fine, however on mouseover they just disappear so I'm guessing that I can't use %s.
My thoughts are that I'm probably going to have to include the responsiveness and/or the mouseover effect in the CSS rather than in the HTML. Any suggestions?
Sorry guys, I'm starting to make a habit of figuring this out, although ChrisWillard and Mr Lister did set me on the right track, so all credit does to them!
Just to be clear for others, this is how I have got it working for me. Both Responsive table/images AND mouse over effect should be achieved though CSS rather than in HTML, so the HTML for each table item was cleaned up to:
<td onClick="document.location.href='(link URL)';">
<div align="center">
<img src="(image URL)">
<br>(Text to display under image)</div></td>
Nice and simple.
The CSS for this table was only short, and ChrisWillard's example showed me how CSS basically works and from this I was able so at the very top of the HTML I included this (in 'style' tags):
img { width: 90%; height:auto; margin: 5px }
img:hover { width: 95%; height:auto; margin: 0px }
table { width: 90%; height:auto }
td { width: 25%; height: 50%; padding: 5px }
I found that when your mouse hovers over an image (without the margins) the whole grid would move a little, so I added a margin which disappears on Hover effect. Since I was only increasing the image size a little I guesstimated that 5px was enough, and it was.
Also I noticed that the width of the individual containers (td) would go funny when resizing the page, so (as I want the grid to have 4 containers on each line) I set the width to 25% and (because I only want 2 lines) I changed the height to 50%.
Once you realise how it works it's really easy, so thank you guys for your help! Much appreciated!
I am using the example mentioned here in my project. I want to stretch the table to fit the whole page.
So, I did:
html, body{
height: 100%;
}
#gridContainer {
height: 100%;
}
table{
width: 100%;
height: 100%;
}
The problem is, only the table header appears on the page and it is stretched properly. The rows do not show up. I also tried to place the <script> before the <style>, but no luck.
How do I fix this?
Make the below change.
table, div {
width: 100% !important;
}
.dojoxGridxBody, .gridContainer, table, #gridContainer {
width: 100% !important;
}
If you want to make no other changes you will have to use !important to override some of the original CSS. But you can use the chrome inspector to find out what this style is overriding, remove the widths that would be set without this in the old CSS and then remove the !important
This page is far from ideally laid out however, as when you change the column structure the page just gets wider and wider. You have multiple tables and divs within these when actually you only need one table.