Solved

Colspans won't overlap automatically

Posted on 2010-09-13
9
491 Views
Last Modified: 2012-05-10
I have two table rows where the rows overlap their center columns by use of colspan. But the rows use different groupings of the cells. I would expect the center columns to overlap but they don't. The browser treats the table almost as though it only has 2 columns that don't overlap. I tried this in both FF and IE7.

Here's the html:
<HTML>
<body>
<Table>
  <tr>
    <td>yada yada yada yada yada yada yada yada yada</td>
    <td colspan="2" align="right">bada boom <button>bada boom</button></td>
  </tr>
  <tr>
    <td colspan="2">bada boom bada boom bada boom bada boom bada boom </td>
    <td align="right"><button>yada</button></td>
  </tr>
</Table>
</body>
</HTML>

Open in new window


What I want is the following:

| yada yada yada yada yada yada yada yada yada | bada boom [button] |
| bada boom bada boom bada boom bada boom bada boom   |   [button] |

But what I get is this:

| yada yada yada yada yada yada yada yada yada                  |   bada boom [button] |
| bada boom bada boom bada boom bada boom bada boom     |                    [button] |

Is there any way to do this simply?

Thanks in advance.
0
Comment
Question by:ZekeLA
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33665991
Did you tried?
<HTML>
<body>
<Table>
  <tr>
    <td colspan="2" width="90%">yada yada yada yada yada yada yada yada yada</td>
    <td align="right">bada boom <button>bada boom</button></td>
  </tr>
  <tr>
    <td colspan="2"  width="90%">bada boom bada boom bada boom bada boom bada boom </td>
    <td align="right"><button>yada</button></td>
  </tr>
</Table>
</body>
</HTML>
0
 
LVL 26

Expert Comment

by:Shaun Kline
ID: 33666016
Try adding width='33%' to the non-column spanned columns.
Also, by turning on the border, you can see how the columns overlap.
<HTML>
<body>
<Table border="1">
  <tr>
    <td width="33%">yada yada yada yada yada yada yada yada yada</td>
    <td colspan="2" align="right">bada boom <button>bada boom</button></td>
  </tr>
  <tr>
    <td colspan="2">bada boom bada boom bada boom bada boom bada boom </td>
    <td width="33%" align="right"><button>yada</button></td>
  </tr>
</Table>
</body>
</HTML>

Open in new window

0
 
LVL 3

Expert Comment

by:Kevin Aleshire
ID: 33666055
Because there is no row with 3 columns, it has nothing to span.
Below creates a 3 colspanned row which is hidden so you don't end up pushing your to visible rows down.
<HTML>
<body>
<Table>
  <tr style="display:none">
    <td colspan="3"></td>
  </tr>
  <tr>
    <td>yada yada yada yada yada yada yada yada yada</td>
    <td colspan="2" align="right">bada boom <button>bada boom</button></td>
  </tr>
  <tr>
    <td colspan="2">bada boom bada boom bada boom bada boom bada boom </td>
    <td align="right"><button>yada</button></td>
  </tr>
</Table>
</body>
</HTML>

Open in new window

0
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
LVL 3

Expert Comment

by:Kevin Aleshire
ID: 33666107
Sorry, don't use the colspan="3", use the code below.

<HTML>
<body>
<Table>
  <tr style="display:none">
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>yada yada yada yada yada yada yada yada yada</td>
    <td colspan="2" align="right">bada boom <button>bada boom</button></td>
  </tr>
  <tr>
    <td colspan="2">bada boom bada boom bada boom bada boom bada boom </td>
    <td align="right"><button>yada</button></td>
  </tr>
</Table>
</body>
</HTML>

Open in new window

0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33666508
None of those ideas work. Even when I change the percentages for Shaun's answer to 60% and 80%, the upper right cell won't appear above the lower left cell. kaleshire's idea looks the same but without the borders.

I ended up splitting the lower left cell's text into two separate cell's so the alignment would work out. My actual code doesn't have a single line of text but several fields run one after the other. So I just split them up into different cells. But I still wish there was a way to tell the browsers to overlap the shared columns.

Overlap-With-Percent.jpg
0
 
LVL 40

Accepted Solution

by:
gurvinder372 earned 250 total points
ID: 33668711
hmm, do they have to be in the same table

please try this

<HTML>
	<body>
		<Table width='200px'><tr>
			<td>
				<Table width='200px'><tr>
					<td>
						yada yada yada yada yada yada yada yada yada
					</td>
					<td colspan="2" align="right">
						bada boom <button>bada boom</button>
					</td>
				</tr></Table>    	
			</td>
			<td>
				<Table width='200px'><tr>
					<td colspan="2">bada boom bada boom bada boom bada boom bada boom </td>
					<td align="right"><button>yada</button></td>
				</tr></Table>    	
			</td>
		</tr></Table>    	
	</body>
</HTML>

Open in new window

0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33669046
No, but in my case I was able to break up one of the cells to achieve the result. Your solution only requires that the width be fixed, I think. It may be the best that's possible.
0
 
LVL 40

Expert Comment

by:gurvinder372
ID: 33669181
May i ask you why do you want the width to be flexible.
0
 
LVL 1

Author Comment

by:ZekeLA
ID: 33672364
It doesn't have to be. Just an observation.
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question