Solved

Colspans won't overlap automatically

Posted on 2010-09-13
9
488 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
Comment Utility
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 25

Expert Comment

by:Shaun Kline
Comment Utility
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
Comment Utility
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
 
LVL 3

Expert Comment

by:Kevin Aleshire
Comment Utility
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 1

Author Comment

by:ZekeLA
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
May i ask you why do you want the width to be flexible.
0
 
LVL 1

Author Comment

by:ZekeLA
Comment Utility
It doesn't have to be. Just an observation.
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

Envision that you are chipping away at another e-business site with a team of pundit developers and designers. Everything seems, by all accounts, to be going easily.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

6 Experts available now in Live!

Get 1:1 Help Now