I am generating the Html in Excel sheet and entire table is fine and except the
two cells are much wider. How do I reduce the width of those cells. I tried changing
the width and everything but no use. It works fine on Html table. On Excel spreadsheet it looks different.
Well, Chrome v6.0.472.62 and Firefox 3.6.10, both on Ubuntu 10.04, allow:
th, td {width: 7em; max-width: 8em; }
the max-width seems to be the important part, preventing the cell from growing. Also the white-space: nowrap is important if you don't want the cell to wrap the contents within the defined width.
There's a demo over at jsbin.com, I've not hidden the overflow on the overflowing cell, deliberately so that you could see it in effect, though in real use you'll need to work out some way of showing the actual contents of the cell without it obscuring the content of its neighbours.
Since its a HTML table, just two cells cant be big. its either one entire row bigger or one entire column bigger.
If that is the case, the dimensions are best-fit based on the content of those cells. Therefore, the width attribute won't take effect. if wordwrap is not helping, changing the fontsize of that exact cell alone can help you.
Something else to check: make sure that you're outputting the proper number of cells per row taking careful account of row/col spanning. If you miss one somewhere, the whole thing will be screwy.
Related
I have a unordered list of thumbnails that work on every other page except one. On this one particular page, there is a large amount of whitespace on the third row. See below:
I don't get why it is doing this, it happens even if you take away padding and margin. The page that this is doing this on is http://bransonweekend.net/cabins/trailsend
This is because you are using:
.picture-board .pinned-photo img {
max-height: 160px;
}
and in that row the first image form factor makes it go the max-height but the other two are too wide so the height is less than the max 160px.
try adding this:
.thumbnails>li{
min-height:172px;
}
this will make sure they are the same height even if they are too wide
Try out this library:
http://masonry.desandro.com/
It's useful in cases like these, where elements have to line up on a grid. Masonry is used all over the internet.
I have a height issue. I'm working with this table. - enter link description here
I'm trying to get the table to shrink in height. Its way to high length wise.
If anyone can help me, I would appreciate it. Do you see where the crystal image is? I want that row to be lowered in height. I've tried everything to get it to work, but I cant figure it out.
It needs work. Centering text etc.
There are ASP.NET sessions being included within the table.
The text-inputs all the way on the right are forcing the cells on the left to expand to their height. The only way to make the other cells "shorter" is to reduce the number of text-inputs on the right (or to make each of them smaller with CSS).
If you are looking to show the crytal in the middle of the cell, then use the below style for the text.
vertical-align: middle;
add this to your CSS. I have only found one solution to your problem i-e if you reduce the font-size you save lot of heigh in your table.
#main_table td
{
font-size:9px;
}
Still learning CSS so pardon if this is obvious -
I am building a header that will contain four sections:
|Header-------------------------------|
|----Title----|----NavigationLinks----|
|----Taglines-|----SelectionBar-------|
|-------------------------------------|
What I would like is for the Taglines section to automatically set the width of the first column (it's content is longer than the title) and then the second column extends to the end of the header section. I can't figure out how to get the columns to match each other without setting specific widths - is it possible to do this without fixed-width areas?
I've been able to come close to what I need using display: table-cell; but can't figure out how to 'connect' the second row to the first.
UPDATE:
Missing a tag caused the div's to ignore the display: table* settings. Using display: table/table-row/table-cell to create a table layout would do what I needed: table-cell will auto stretch the column affecting the width of the rows above it.
Not sure if this is kind of what you're looking for. Question seemed a bit unclear.
http://jsfiddle.net/KacPY/1/
Instead of using outdated tables I would consider notating your widths in percent in order to have a fluid layout.
http://jsfiddle.net/kJRQE/
I'm having issues with creating equal height columns on the basic Dreamweaver HTML5 3 col fixed layout. I was using jQuery equal height columns to make the column's bg colour be equal on all pages, however due to some scripts I am using on my site and incompatibility with a manual "style:height:xpx" added to the article column I would like to try and use the display:table, display:table-cell method. I have used the basic Dreamweaver 5.5 HTML5 template, and kept everything the same except removed the display:block property for aside, article etc elements. I added a container div around the 3 columns; aside, article and aside.
Everything works fine - as in the background colour continues until the end of the block, which is what I need - except the trouble is, for some reason on the aside columns it leaves a gap at the top of the columns of 13px. I have no idea why this is happening.
I have uploaded the file here: http://www.primecuts.org.uk/test.html . If I remove the <nav> part, the gap is still there, although it doesn't look as "ugly" as the bgcolor difference is not noticeable, I would like there to be no gap between the text starting and the top of the block/bottom of the header. Any help would be appreciated, I don't know what is causing this.
The problem can be fixed by
.sidebar1 { vertical-align:top; }
The gap has something to do with the padding on the .content article, in the sense that removing padding removes the gap, and the padding is influencing the position of sidebar because they are both table cells in the same table row, but I confess that's a bit of a woolly explanation, and I can't actually identify the specific CSS requirement that this relates to.
I am experimenting with a fixed header table (I have seen many plugins online but I want to do it myself using PURELY CSS) at http://dev.driz.co.uk/table.html
However I have two issues:
The headers doesn't stretch the width of the table anymore and is no longer in sync with the table rows below. How do I fix this?
I have put a border around the table and also around the table cells and so have now ended up with double borders in some places. How can I get around this? As I need the table to have the border as the cells will not always be on screen and cannot be relied on to provide the box around the table.
If someone can help, it'd be much appreciated.
Through experimenting I've found that position:absolute on either tbody or thead is causing the issue where your table head items aren't lining up to the table data. Absolutely positioning an element breaks it out of the rendering flow of the page. So adding position:absolute to thead causes the header items to collapse to the content in them and adding it to tbody breaks the table data cells from normal flow which means thead cannot relate its cell widths to tbody's.
This is just what I've found but if I'm wrong I'm open to correction.
Using table-layout: fixed; solves the issues!