Solved

Colspans won't overlap automatically

Posted on 2010-09-13
9
492 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
The New “Normal” in Modern Enterprise Operations

DevOps for the modern enterprise offers many benefits — increased agility, productivity, and more, but digital transformation isn’t easy, especially if you’re not addressing the right issues. Register for the webinar to dive into the “new normal” for enterprise modern ops.

 
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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
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.

856 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