I've been struggling with Table-Layout and now I tried to implement the lessons in my application - and that supposedly "simple rendering exercise" still ruins my day :((
The screenshot below illustrates the problem a bit: 2 rows have a fixed height of 20px, but as the 5th col is too heigh, IE splits the neccassary "filling" equally across all rows, whereas FF respects the assign row-height and only extends the last row w/o a height-spec. (In my real case, also FF renders incorrectly and enlarges rows w fixed height).
So I wonder if there is perhaps a safe (cross-browser) solution to fix this???
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
</head>
<body>
<table border="1" cellspacing="2" cellpadding="2">
<tbody>
<tr style="height:20px;"><td style="height:20px;">1a</td><td>1/2</td><td>1/3</td><td>1/4</td>
<td rowspan="4" style="height: 300px;">the <span style="background-color: yellow">supacell</span> just contains a lot of text and other info, variable height etc.</td></tr>
<tr><td height="20">bla2</td><td><input type="text" /></td><td>2/3</td><td>2/4</td></tr>
<tr><td height="20">bla3</td><td>3/2</td><td>3/3</td><td><textarea cols="20" rows="4">bla</textarea></td></tr>
<tr><td colspan="4">no height</td></tr>
</tbody>
</table>
</body>
</html>
Try setting the line-height property instead/as well as the height property, the extra padding/margins you're seeing is as a result of line-height calculations, by defining it you'll be able to fix it and keep it constant between browsers.
Related
Very similar to this question:
Making a piece of text non-breaking
However, I am doing this on Chinese and there are no spaces used. I want to make sure so a book title or other phrases are not broken up and have orphan words. How do I do this?
Note: I tried using <nobr> but that isn't behaving properly. Sample code and screen shot of the problem:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table border=1>
<td style="width: 25em;">《1字字字字》,《2字字字字》,《3字字字字》,《4字字字字》,<nobr>《5字字字字》</nobr>,<nobr>《6字字字字》</nobr>,<nobr>《7字字字字》</nobr>,<nobr>《8字字字字》</nobr>,<nobr>《9字字字字》</nobr>,《10字字字字》</td>
</table>
<br><br>
<table border=1>
<td style="width: 25em;">《1字字字字》,《2字字字字》,《3字字字字》,《4字字字字》,《5字字字字》,《6字字字字》,《7字字字字》,《8字字字字》,《9字字字字》,《10字字字字》</td>
</table>
</body>
</html>
Screenshot:
The <nobr> is ignoring the possibility of a line break in the commas, so it is treating element 5 and on as a single line, pushing the cell past the width I have setup.
Additional Note: I just did a quick test of using span.nobr { white-space: nowrap; }. It does the exact same thing as <nobr>, so I'm a bit stumped.
You can use a <wbr> (Word Break) tag to indicate where one word ends and the next begins, telling the browser that a break could go there. If your page is encoded in Unicode you can also use the U+200B character (which acts like a space but doesn't print anything) for this purpose.
This seems to work...
<td style="width: 25em;"><nobr>《1字字字字》,《2字字字字》,《3字字字字》,《4字字字字</nobr>》,《5字字字字》,《6字字字字》,《7字字字字》,《8字字字字》,《9字字字字》,《10字字字字》</td>
Demo
Adding a class and using jquery, something like this?
<td class="nobr" style="width: 25em;">《1字字字字》,《2字字字字》,《3字字字字》,《4字字字》,《5字字字字》,《6字字字字》,《7字字字字》,《8字字字字》,《9字字字字》,《10字字字字》</td>
jquery..
$(function(){
$(".nobr").text(function () {
var addNobr=$(this).text().replace(/\《/g, '<nobr>《').replace(/\》/g, '</nobr>》');
$(this).html(addNobr);
});
});
Result...
New Demo
can you try this? it works for me.
CSS:
td div.nobr { display:inline-block; }
HTML:
<table border=1>
<td style="width: 25em;">
<div class="nobr">«1????»,«2????»,«3????»,«4????»,</div>
<div class="nobr">«5????»</div>,
<div class="nobr">«6????»</div>,
<div class="nobr">«7????»</div>,
<div class="nobr">«8????»</div>,
<div class="nobr">«9????»</div>,
<div class="nobr">«10????»</div>
</td>
</table>
You basically put each one of your character's group into a div, and you set a display:inline-block; property to all the div.
Here is a simple table example of using table rules=all with cell borders
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Page</title>
</head>
<body>
<table rules="all">
<tr>
<td style="border: red solid 1px;">
Title
</td>
</tr>
</table>
</body>
</html>
In most browsers (including Firefox 3.6) it comes out with a red border round the cell, but in Firefox 5 (and IIRC also Firefox 4) there is no cell border.
Is this a bug in Firefox or is there some variation allowed by the specification?
On a related point, is there any point in using the table rules attribute? It doesn't seem to be deprecated but I can't see it does anything that you couldn't do in CSS. In this case, ASP.NET was generating it automatically otherwise I would never have used it.
There is no spec for what rules="all" actually does yet, so pretty much any behavior is "correct".
That said, the current Firefox behavior is to map rules="all" to some border styles in the collapsed border model. Given the details of that mapping (which are currently in the HTML5 draft at http://www.whatwg.org/specs/web-apps/current-work/multipage/rendering.html#tables ), the observed behavior is correct.
The 'rules' are only displayed if there are other td's to separated it from. And then the style information is partly overwritten by the adjacent cells. If you create a 3x3 table like this
<table rules="all">
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
<td>foo</td>
<td style="border: red solid 1px;">
Title
</td>
<td>foo</td>
</tr>
<tr>
<td>foo</td>
<td>foo</td>
<td>foo</td>
<tr>
</table>
FF5 will draw red lines at the right and bottom of the "Title" cell and the others black. Seems like the style information of upper and more left cells is more powerful.
Hope this helps
Cheers
tannerli
I can't answer the first part - although I was able to make it work by adding some kind of border to the table tag: http://pastehtml.com/view/b35h9852w.html
According to w3schools, you are recommended to only use CSS for this sort of styling (and I agree).
It does appear to be a bug in Firefox, though. I can't find a clear explanation either way.
This question already has answers here:
Closed 10 years ago.
Possible Duplicate:
HTML table with fixed headers?
I've tried several methods to get a scroll bar from an HTML table with a fixed header but had no luck. I think I need a solution where the header is somehow "attached" to the table body (rather than the typical nested table solution). Every solution I tried messes up the width of the header columns and the body columns. In other words they get out of synch and the columns of the header don't line up properly with those of the scrolling table. The widths of the headers and the columns vary from column to column.
Is there any way for me to achieve this? I'd rather not use JavaScript. Oh and I need this to work in Internet Explorer as well.
Update: It is pretty important for me to get this functionality. I need the fixed header for both column and row headers. So far no solution has worked properly. I considered making the headers separate tables, but this wouldn't work when scrolling since the headers would stay fixed.
It seems like there would be many use cases for fixed HTML headers so it is surprising to me that there is no adequate solution.
(Oh, and I tried the option suggested by opatut in the link, but it doesn't work in all browsers and I need this work in Internet Explorer, Firefox and Chrome. If it doesn't work in Internet Explorer 6 that's OK).
Oh, and if I must fix the column widths or row heights, that's OK too, I would just be glad to have a working fixed header HTML table (cross-browser).
I have a solution which is a pure CSS solution and allows the table to be normal and variable width. This is a new solution and has some issues depending on the design of your headers. The good news is that if your headers are left-aligned, or your columns are fixed width, it should be fine. There are some visual bugs in IE6, and I've found that some cells need a min-width to keep the headers showing if the content in the column is less wide then the header. All the issues are visual, so if it looks good you're done. The table body is totally normal, and since there's no JavaScript you don't have to do anything if the user re-sizes the page.
Check out my solution and leave me a comment
http://salzerdesign.com/blog/?p=191
I know you're trying to avoid Javascript, but I was in exactly the same boat as you (struggling with what to do for days on the exact challenge for a new application) and solved the problem in about 10 minutes once I found Datatables:
Working example of a solution: http://www.datatables.net/examples/basic_init/scroll_y.html
It EXACTLY matches header and body columns width-wise every time. Widths can be specified, but it's also intelligent enough to auto size. Column highlighting and sorting is supported by default using the provided sample CSS. Switching to a paginated model (what I ended up using) is a single line of code. And....the best part--if you're concerned that your user might not have Javascript turned on, it degrades perfectly back to standards-compliant HTML tables. IMHO, it's the least painful, most feature rich solution out there that fully supports IE.
If it makes you feel any better, I've used this solution on both a government (military) site and an international bank's websites....both the most demanding and strictest customers I've ever come across...and both were extremely happy with the results.
My first answer didn't attempt to fix both headers and columns. Here's an example that should work in all typical browsers (but it may need some tweaking).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<style>
th { text-align: center; border: 1px solid black; padding:3px; }
td { text-align: center; border: 1px solid black; padding:3px; }
th.c1, td.c1 { width: 100px; }
th.c2, td.c2 { width: 150px; }
th.c3, td.c3 { width: 60px; }
th.c4, td.c4 { width: 100px; }
th.c5, td.c5 { width: 150px; }
th.c6, td.c6 { width: 60px; }
#rowScroll { height: 100px; } /* Subtract the scrollbar height */
#contentScroll { height: 100px; width: 300px; }
#colScroll { width: 272px; } /* Subtract the scrollbar width */
</style>
<table cellspacing="0" cellpadding="0" style="float: left;" style="width:300px; height:100px;" >
<tr>
<td id="void" style="border: 0;">
</td>
<td id="rowHeaders" style="border: 0;">
<div id="colScroll" style="overflow-x:hidden;">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr>
<th class="c1">A</th>
<th class="c2">B</th>
<th class="c3">C</th>
<th class="c4">D</th>
<th class="c5">E</th>
<th class="c6">F</th>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td id="colHeaders" style="border: 0;">
<div id="rowScroll" style="overflow-y:hidden">
<table cellspacing="0" cellpadding="0">
<tr><td>R1</td></tr>
<tr><td>R2</td></tr>
<tr><td>R3</td></tr>
<tr><td>R4</td></tr>
<tr><td>R5</td></tr>
<tr><td>R6</td></tr>
<tr><td>R7</td></tr>
<tr><td>R8</td></tr>
<tr><td>R9</td></tr>
</table>
</div>
</td>
<td id="content" style="border: 0;">
<div id="contentScroll" style="overflow:auto">
<table cellspacing="0" cellpadding="0" style="width: 600px;">
<tr><td class="c1">A1</td><td class="c2">B1</td><td class="c3">C1</td><td class="c4">D1</td><td class="c5">E1</td><td class="c6">F1</td></tr>
<tr><td class="c1">A2</td><td class="c2">B2</td><td class="c3">C2</td><td class="c4">D2</td><td class="c5">E2</td><td class="c6">F2</td></tr>
<tr><td class="c1">A3</td><td class="c2">B3</td><td class="c3">C3</td><td class="c4">D3</td><td class="c5">E3</td><td class="c6">F3</td></tr>
<tr><td class="c1">A4</td><td class="c2">B4</td><td class="c3">C4</td><td class="c4">D4</td><td class="c5">E4</td><td class="c6">F4</td></tr>
<tr><td class="c1">A5</td><td class="c2">B5</td><td class="c3">C5</td><td class="c4">D5</td><td class="c5">E5</td><td class="c6">F5</td></tr>
<tr><td class="c1">A6</td><td class="c2">B6</td><td class="c3">C6</td><td class="c4">D6</td><td class="c5">E6</td><td class="c6">F6</td></tr>
<tr><td class="c1">A7</td><td class="c2">B7</td><td class="c3">C7</td><td class="c4">D7</td><td class="c5">E7</td><td class="c6">F7</td></tr>
<tr><td class="c1">A8</td><td class="c2">B8</td><td class="c3">C8</td><td class="c4">D8</td><td class="c5">E8</td><td class="c6">F8</td></tr>
<tr><td class="c1">A9</td><td class="c2">B9</td><td class="c3">C9</td><td class="c4">D9</td><td class="c5">E9</td><td class="c6">F9</td></tr>
</table>
</div>
</td>
</tr>
</table>
<script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
var content = $("#contentScroll");
var headers = $("#colScroll");
var rows = $("#rowScroll");
content.scroll(function () {
headers.scrollLeft(content.scrollLeft());
rows.scrollTop(content.scrollTop());
});
</script>
</body>
</html>
Try my solution, it's bug free and optimized for performance (not sacrificing functionality):
http://code.google.com/p/js-scroll-table-header/
If you try it and need any help, just ask, I'm the author.
It's a bit too much code to put in here directly, but what it comes down to is, at minimum, you'll need some hefty CSS for this. Using javascript and jQuery can lighten that, so I'll include links to both methods.
HTML + CSS Only
You can use the source on this page to copy an example of how you can do exactly what you're asking via CSS and HTML. This is reported as working in pretty much all current browsers (Opera 7.x + (All Platforms), Mozilla 1.x + (All Platforms), IE 6.x + (Windows), Safari 1.x + (MacOS), Konqueror 3.x + (Linux / BSD)), but if you have to go back to IE 5.x, it starts to fail.
Javascript/jQuery
If you decide that you're open to including Javascript and jQuery, there's a second option that looks a bit simpler to implement: this blog article shows how.
All I've found need fixed values for cell width and height, so if you want to keep it dynamic you're stuck with JavaScript.
One solution I like is this one, but you need to define a width for each colum. » Fixed headers in large HTML tables at The Code Project.
If you don't want to use JavaScript, maybe you can set the fixed column widths with PHP. I would determine the average string length of the cells to get the column width:
column_width = column_average / (all_cells_average * column_count) * table_width
You can use DataTables without JavaScript. It won't have sorting but the table, headers and divs that are hosting them will work. Just look at the page source - it has 3 divs each with a table with identical widths in thead. Top and bottom just provide header and footer and the one in the middle provides data. It's actually pretty close to your original idea that you need to heep these parts separated.
I am using following code to design my home page. The output (as shown below) is not appearing properly. You can see the banner going to far left and the navigation links have a huge gap in between. How to set this? Can it be done using only the DIV tag instead of TABLE?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>
First Website
</title>
</head>
<body>
<table id="main" align="center" width="600 px">
<tr id="trBanner">
<td id="tdBanner">
<img src="../../../My Pictures/banner copy.bmp.jpg"
</td>
</tr>
<tr id="trNavLinks">
<td id="lnkHome">
Home
</td>
<td id="lnkLife">
Life
</td>
<td id="lnkTeachings">
Teachings
</td>
<td id="lnkExperiences">
Experiences
</td>
<td id="lnkPhotoGallery">
Photo Gallery
</td>
<td id="lnkReach">
How to Reach
</td>
<td id="lnkContact">
Contact Us
</td>
</tr>
</table>
</body>
</html>
alt text http://www.freeimagehosting.net/uploads/b122c4ef21.jpg
Without seeing your code very long - don't use tables!
I know it's hard for those people who developed a long time with tables in webdesign, but belive me - after you learned how to design it with CSS & DIV-Tags, you will thank god for this!
Here is a tutorial for you: http://www.colorplexstudios.com/articles/div_web_design_tutorial/
And if you want to have an answer to your code-question:
It's because you have 1 cell in the first row and 3 cells in the second row. Use the colspan-attribute. You find a tutorial for this here: http://www.htmlcodetutorial.com/tables/index_famsupp_30.html
Don't use tables, use a right combination of div tags and position attributes. They're way better than tables, and more editable if you need to make any changes.
Eek, remove the tables. Use a UL instead, with display: inline on it in the CSS. Then adjust it to your liking (margin, padding). Put that inside of a div, and position it in your page.
As others have recommended, tables are not the most appropriate element for your site's layout. However, the simple fix is:
<td id="tdBanner" colspan="7">
This will make your banner span the entire width of your table. On a side note, the ids on a page should be unique, so if you need to give an id to your td tags, they should be different than the a tags.
I would check out some of the CSS tutorials that others have linked to.
I have some pretty simple HTML and CSS that doesn't work in Internet Explorer 6.
<!DOCTYPE HTML>
<html>
<head>
<style>
table td.one.read {background-color:#FFD700;}
table td.two.read {background-color:#0000ff;}
table td.three.read {background-color:#ff8c00;}
</style>
</head>
<body>
<table>
<tr class="head">
<td></td>
<td class='one read'>one</td>
<td class='two read'>two</td>
<td class='three read'>three</td>
</tr>
<tr>
<td>Legend</td>
<td class='one read'>1</td>
<td class='two read'>2</td>
<td class='three read'>3</td>
</tr>
</table>
</body>
</html>
A simple table that has different background colors for each column. I've removed a bunch of other CSS/HTML to keep things simple. The problem is all the columns show up as the same orange color in Internet Explorer 6, works fine in Firefox.
How can I make it work?
This is a bug in IE6.
If you have a CSS selector with multiple class names (eg, .three.read), IE6 will ignore all of the class names except the last one.
Therefore, IE6 sees three CSS rules for the selector table td.read.
To solve this, you can combine your classes. (eg, <td class='OneRead'> and table td.OneRead {background-color:#FFD700;})
Multiple classes are not supported in IE6, have to wait a few more years before IE6 dies. For now though, you can create separate classes for colors.