Solved

Colspans won't overlap automatically

Posted on 2010-09-13
9
493 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

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

Suggested Solutions

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…
Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

749 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