On my web site I have necessity to define "vertical-align:baseline" for few types.
That style work perfectly fine in IE, but has a problem in Chrome which I can't replicate in the simplest example. The code below works totally fine, but the same code rendered by my web site has content of the "Last Name", "LLLLLLL" cells aligned to a base line of the "Big cell", but not to the base line of the own cells. In fact it is aligned to the base base line of the ALL "spanned" rows...
<html>
<head><title>Test table vertical alignment</title><body>
<style type="text/css">
table.t_data
{
border-collapse:collapse;
margin: 0 auto 0 auto;
}
table.t_data tbody th, table.t_data tbody td
{
border: #333 1px solid;
vertical-align: baseline;
}
</style>
<table class="t_data">
<tbody>
<tr>
<th>Last Name</th>
<td>LLLLLLLL</td>
<td rowspan="3">Big cell</td>
</tr>
<tr>
<th>First Name</th>
<td>FFFFFF</td>
</tr>
<tr>
<th>Team</th>
<td>My Cool Team</td>
</tr>
</tbody>
</table>
</body>
</html>
I thought that is a "popular" (well known) bug, but can't find anything about same problem.
It looks like there is something else in my code that affects vertical alignment, but I can't figure out what is wrong. I've tried to disable that different style options but have not found any that affects vertical alignment.
Question 1: is there a known problem with such alignment and table cells grouped by rowspan?
Question 2: if there are no common solution, could you please check the code on the page: http://vfm-elita.com/player/4990. You will see that cells in the first row are empty, their content moved to the bottom to be aligned with the bigger cell base line...
I will welcome any help or thoughts. thank you very much in advance!
P.S. I've found similar problem (http://stackoverflow.com/questions/10272553/vertical-align-baseline-doesnt-work-in-chrome), but suggested solution doesn't help in my case.
P.P.S. I accept that my question could cause negative feedback by referencing the external site, but I struggle with this problem a few days and will take this pain. Also promise to remove the link once problem is resolved.
EDIT: P.P.P.S.
The idea to have "vertical-align:baseline" was caused by necessity to vertically align the content of the table row for the case when same row has both "plain text" and "" elements (like buttons or input text field).
But, recently I've found that the "vertical-align" style doesn't align element content. It aligns element itself, so in my case instead of applying "vertical-align:baseline" to the cells (td, th) I should probably apply it to the cell content. But that doesn't resolve the problem as well...
