Solved

Colspans won't overlap automatically

Posted on 2010-09-13
9
496 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Secure Your WordPress Site: 5 Essential Approaches

WordPress is the web's most popular CMS, but its dominance also makes it a target for attackers. Our eBook will show you how to:

Prevent costly exploits of core and plugin vulnerabilities
Repel automated attacks
Lock down your dashboard, secure your code, and protect your users

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

724 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