I need to display an HTML with various cells merged across rows.
Here's a test that illustrates the requirement and issue:-
<html>
<head></head>
<body>
<table cellspacing="0" cellpadding="0" border="1">
<tbody>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
<td rowspan="3" style="height: 60px">
<div style="width: 100px;">RS=3</div>
</td>
</tr>
<tr>
<td rowspan="4" style="height: 80px">
<div style="width: 100px;">RS=4</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="2" style="height: 40px">
<div style="width: 100px;">RS=2</div>
</td>
</tr>
<tr>
<td rowspan="1" style="height: 20px">
<div style="width: 100px;">RS=1</div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
When displayed in Chrome it is OK, but in FF3.6 and IE8 it is not (look at the two "RS=2" in column one, they have the same rowspan and height but are visibly different). Row heights are incredibly important to me as I display another table next to this with single rows of fixed height that needs to align with this table).
Can anybody please advise how this can be corrected in Firefox and IE?
Here's a fix that works in Firefox but not Internet Explorer. Remove the height attribute from the cells, then either add
style="height:20px;"
to all rows OR
add this style tag inside the head:
<style>
tr{height:20px;}
</style>
This works in Firefox and Chrome is unaffected, but IE still makes a mess.
Firefox and IE both have a history of bugs when rendering tables.
discussion of table cell height rendering bug in Firefox
Some newest "intelligent" browser dectect eventual "not closed tag" errors and show it as your tree is well done, but it is not always like this.
Check all opened tags are closed, there must be a non-closed one.
If you use Dreamweaver you can colapse/expand tags by the menu on the left. ->...<- or <-...->
Without a proper doctype, you are in quirks mode and IE, in particular, will never attempt to perform like all the other far more modern browsers. Not that is does a good job of it in any case.
Related
I am facing a strange bug that is happening on both IE and Chrome. I have and application that loads a matrix of info but for some reason in a specific case things dont show correctly. By configuration i am able to change the way the info is being displayed and for that i use the rowspan and colspan.
I am not using any Javascript, just html. This image show what is happening:
Sorry still cant post image but here is the fiddle
http://jsfiddle.net/gondias/22o07mbt/
<table cellspacing="6" cellpadding="0" style="width:558px; background-color:red">
<tr>
<td colspan="3" rowspan="2">
<div class="tile_3x2"></div>
</td>
<td colspan="1" rowspan="2">
<div class="tile_1x2"></div>
</td>
</tr>
<tr></tr>
<tr>
<td colspan="2" rowspan="2">
<div class="tile_2x2"></div>
</td>
<td colspan="2" rowspan="2">
<div class="tile_2x2"></div>
</td>
</tr>
<tr></tr>
<tr>
<td colspan="4" rowspan="1">
<div class="tile_4x1"></div>
</td>
</tr>
<tr>
<td colspan="4" rowspan="1">
<div class="tile_4x1"></div>
</td>
</tr>
</table>
For some reason the 1st cell in the second row gets extended pushing the following one.
Let me know of any questions you may have.
I think the usage of the rowspan/colspan is correct. Does anyone know what is happening here.
Thanks for the help, i'm really struggling here.
Do you really need to use tables here? Is it used for an email newsletter?
You can use divs with display: inline-block; to get the desired result without a table.
If you really need to take this way (not recommended), this is your solution:
http://jsfiddle.net/rcdmk/22o07mbt/1/
td {
width: 132px;
}
If you place a border on the TD tags you will see what's happening there. The cells (columns) doesn't have specific widths so the browser have to guess based on the content and this is not a consistent behavior between browsers. You will have to just give a width to the cells.
I'm having trouble with a table's behaviour in Firefox. I want a table consisting of two columns in the ratio 3:1. The first column includes 3 images in a second table which should resize to fit into the column.
In Chrome the images resize to fit into the first column, which is correctly set to 75%. They do this whether I specify a max-width or do not give them any size attributes. However, in Firefox, the images do not resize and instead the cell expands to be greater than 75%, meaning that the contents of the second column becomes squashed.
The structure of the code looks like this:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<table cellpadding="2" cellspacing="0">
<tbody>
<tr>
<td>
<img src="image1.jpg" style="max-width:625px;" />
</td>
<td rowspan="2">
<img src="image2.jpg" style="max-width:240px;" />
</td>
</tr>
<tr>
<td>
<img src="image3.jpg" style="max-width:625px;" />
</td>
</tr>
</tbody>
</table>
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
How can I adapt this code so that it works correctly in Firefox as well as in Chrome? I've read other related questions, but haven't been able to find a solution I can get to work.
P.S. Please no comments on how I shouldn't be using CSS like this. I have my reasons for not using a proper stylesheet while I'm playing around.
Unless I'm missing the boat, why don't you simply assign a relative width to the image? A value of 100% will ensure the image resizes in tandem with its parent table cell:
<table border="0" cellpadding="10" cellspacing="10" style="width: 100%;">
<tbody>
<tr>
<td style="vertical-align:top;width:75%;">
<img src="https://www.google.ca/images/srpr/logo11w.png" style="width:100%;" />
</td>
<td>
Second column
</td>
</tr>
</tbody>
</table>
ref: http://jsfiddle.net/j26Fm/
The trick here I would say is table-layout: fixed;. It does require some additional rules but table-layout is what brings it all together.
Check out: http://codepen.io/pstenstrm/pen/kLKxz
This is worked for me, in IE, FF and Chrome.
<table style="table-layout: fixed; width: 100%; border: 0; cellspacing: 0; cellpadding: 0;">
and
<tr valign="middle">
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
<td style="width: 25%;"></td>
</tr>
I have a table with a layout that I made. The layout looks well in Google Chrome and Firefox but not in Internet Explorer.
This is how it's looks in Chrome:
This is how it's looks in IE:
This is the table's HTML code:
<table border="1">
<tr>
<td style="width: 46%" colspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
</tr>
<tr>
<td style="width: 23%" rowspan="2"></td>
<td style="width: 23%" rowspan="2"></td>
</tr>
<tr>
<td style="width: 46%" colspan="2"></td>
</tr>
</table>
How can I resolve these layout differences?
You could try many things to fix this issue...
Try adding the following "hacks" to your html page:
<!--[if IE]>
<link href="/style/ie.css" type="text/css" rel="Stylesheet" />
<![endif]-->
<!--[if !IE]>
<link href="/style/core.css" type="text/css" rel="Stylesheet" />
<![endif]-->
This will force IE to use the rules you specify in ie.css so you can give it the rules you want there. This will also hide the other parts that are used in Google Chrome and Firefox from IE.
Instead of percentages, try using fixed pixel values like
<td style="width: 20px; padding-top: 20px;" rowspan="2">
You can use the following site to validate your CSS to see if it meets
the W3C standards:
http://jigsaw.w3.org/css-validator/
It'll go though your CSS, check compatibility, and spit back errors if
they exist. It'll show you where in your file you have mistakes so you
can go fix them. I don't know about any tools that will fix your CSS
for you... I wouldn't use it though because I wouldn't learn anything
that way.
You can use the following site to validate your HTML and other markup
languages you use:
http://validator.w3.org/
Using these tools will help you make cross-browser compatible
websites... if something is not compatible, you can use these tools
for debugging and fixing your work.
As Rob had pointed out below, IE is outdated and most versions lack HTML5 compatibility, so you will have to come up with solutions if you're going to be making cross-browser compatible sites.
I think it because IE will try and fill the remaining space it sees
instead of using rowspan
try using height="33%" or height="66%"
or try both
Define height for each row like this:
<table border="1" style="width:100%; height: 100%">
<tr style="height: 33%">
<td style="width: 46%" colspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
<td style="width: 23%; padding-top: 0.5%" rowspan="2"></td>
</tr>
<tr style="height: 33%">
<td style="width: 23%" rowspan="2"></td>
<td style="width: 23%" rowspan="2"></td>
</tr>
<tr style="height: 33%">
<td style="width: 46%" colspan="2"></td>
</tr>
</table>
Tested on IE8 and IE 11
I have a problem with dynamic height of the table cell. I've set it to rowspan=2 so it should take 2 rows for it's height.
My code:
<table cellspacing="0" cellpadding="0" style="width: 640px;" align="center">
<tr>
<td colspan="3"><img src="bg-top.png" /></td>
</tr>
<tr style="height: 669px;">
<td><img src="bg-left.png" style="display: block"/></td>
<td valign="top" rowspan=2 >
lorem ipsu
</td>
<td><img align="right" src="bg-right.png" style="display: block"/></td>
</tr>
<tr>
<td background="cont.png"></td>
<td background="cont.png"></td>
</tr>
</table>
I'm trying to make images look like a border around the text, and if text is longer than what can be put in 700px than it should repeat cont.png. It looks fine in Opera and Chrome but in IE and Firefox it's not working.
Screnshots:
in mozzila: http://shrani.si/f/1h/12j/3c72q2gv/notworking.png
in chrome: http://shrani.si/f/Q/n/3w7G0jOn/working.png
Any ideas what I might change?
I would convert this to use CSS instead.
I'v got it to work! U used only one row and set background picture to it and then set my left and right on top of it, and set it with valing=top. Now it works evrywhere except in outlook :S
I have this code:
<tr>
<td width="40%" align="left" class="form_cell">
<span class="sub_header">Update or Delete</span><br />
Please select whether you would like us to update this contacts details, or delete them from the system.
</td>
<td width="60%" align="left" class="form_cell">
[class=form__parser func=updateDetails__updel(150.$update_or_delete$.true)]
</td>
</tr>
<tr>
<td width="100%" align="left" colspan="2" id="ammend_contact_details" style="display: none;">
<table border="0" cellspacing="0" cellpadding="0" width="100%" align="left">
<tr>
<td width="40%" align="left" class="form_cell">
<span class="sub_header">New Title</span><br />
Please enter the contacts new title, IE Mr, Mrs, Dr, Miss, Ms
</td>
<td width="60%" align="left" class="form_cell">
<input type="text" name="update_contact_title" class="input" size="48" maxlength="6" value="$update_contact_title$" />
</td>
</tr>
</table>
</td>
</tr>
The code which start with [class=form__parser...] creates a drop down list. If you click one of the options, the cell below it (ID ammend_contact_details) is displayed, otherwise its hidden.
The website address for this page is: http://www.westlandstc.com/index.php?plid=6#eyJwbGlkIjoiNTkiLCJjbGlkIjoiNDQ2Iiwic2NsaWQiOiJudWxsIiwiZHluYW0iOiJudWxsIiwiYXBwSWQiOiJudWxsIn0= and the element in question is at the very bottom of the page.
The problem is, the colspanattribute works fine in internet explorer (surprise surprise), however, in Chrome, all the content which is supposed to be spread over the 2 parent columns, only goes into the 1st column.
I have narrowed the bug down further, if I remove the style="display: none" attribute it works fine. Everytime I try to change either the display style or visibility style, Chrome places everything back into the first column.
In addition, I tried setting the background colour of the cell which spans 2 columns to red. In internet explorer, again this works as expected. In chrome, no background-color is displayed.
Any ideas how to fix this?
What are you setting the 'display' property to in order to show it? iirc you would need to use 'display:table-cell' (or similar - can't remember the exact value) in order for chrome to treat it as a table cell
style.display=''
works for me with chrome.
'display:table-cell'
does not
Rather than adding the CSS property display:inline to the <td>, which for some reason IE is happy with and Chrome is not, I would update your JavaScript to just remove the display:none style and let the browser's default display:table-cell take affect.
In the <select name="update_or_delete"> onchange method simply have:
if(this.value=='Update') {
document.getElementById('ammend_contact_details').style.display='';
} else {
document.getElementById('ammend_contact_details').style.display='none';
}
Chrome doesn't seem to respect colspan unless it has at least 1 row exactly matching number of columns in the table. I tried to make a grid with 2 items in 1st row and 3 items in 2nd row. For Firefox that's all you need:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
</table>
But it doesn't work on Chrome and Edge, even though all <td>s have default styling: display: table-cell. To fix it you need to add empty row with exact match for column count so it finally looks like this:
td {
display: table-cell;
padding: 10px;
text-align: center;
background: #eee;
}
<table style="width: 100%">
<tr>
<td colspan="3" style="width: 50%">box 1.1</td>
<td colspan="3" style="width: 50%">box 1.2</td>
</tr>
<tr>
<td colspan="2" style="width: 33.33%">box 2.1</td>
<td colspan="2" style="width: 33.33%">box 2.2</td>
<td colspan="2" style="width: 33.33%">box 2.3</td>
</tr>
<tr style="visibility: hidden">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>