Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chriss Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Table Border Question

Status
Not open for further replies.
Mighty

Mighty

Programmer
Joined
Feb 22, 2001
Messages
1,682
Location
US
I'm grasping at straws here because I don't think that this is going to be possible but I thought I'd ask the question anyway.

I have a table with the borders in view and I was wondering if it was possible to have a cell spanning two cells but with the border in between still visible but behind the text.

Don't know if that's explained very well.

Mighty
 
Sort by date Sort by votes
Not really, but you could fake the border with the background in that cell. You could do something like this:

<td colspan="2" style="background: url(border.gif) repeat-y center;">blah blah blah</td>

I guess it's a long shot, but it is feasible.
 
Upvote 0 Downvote
Another option is to fake the text by putting the text in a hidden DIV, then moving the DIV to match the cells of the table you want the text in. The following works for me in IE6:

Code: 
<html>
<head>
<script>
function changeDimensions()
{
 textToPlace.style.position = 'absolute';
 textToPlace.style.left = fixedTable.offsetLeft + leftCol.offsetWidth/4;
 textToPlace.style.top = fixedTable.offsetTop + leftCol.offsetHeight/4;
 movingTable.style.width = (leftCol.offsetWidth*3/4) + (rightCol.offsetWidth*3/4);
 textToPlace.style.visibility = 'visible';
 textToPlace.style.display = 'inline';
 fixedRow.style.height = textToPlace.offsetHeight;
}//end showDimensions()
</script>
</head>
<body onload='changeDimensions()'>
<table id='fixedTable' border='1'>
<tr id='fixedRow'>
<td><div id='leftCol'>&nbsp;</div></td>
<td><div id='rightCol'>&nbsp;</div></td>
</tr>
<tr>
<td>Hello from the left column!</td>
<td>Hello from the right column!</td>
</tr>
</table>
<div style='visibility:hidden;display:none;' id='textToPlace'><table id='movingTable'><tr><td id='movingCell'>Look at me!  I'm crossing boundaries! ...and taking up 3/4 of each of the cells I enter!</td></tr></table></div>
</html>

I haven't commented the code very much, but check it out and see if you have any questions. The text wraps to fit the width of the cells (or whatever width you want) and the cells grow in height to match the wrapped text. Fun!

--Dave
 
Upvote 0 Downvote
Here. This is a little better with a little less complication and some more descriptive variable names.

Code: 
<html>
<head>
<script>
function changeDimensions()
{
 var topMargin = fixedTable.offsetTop + fixedRow.offsetHeight/4;
 var leftMargin = fixedTable.offsetLeft + leftCol.offsetWidth/4;
 var rightMargin = fixedTable.offsetLeft + leftCol.offsetWidth + (rightCol.offsetWidth*3/4);

 textToPlace.style.position = 'absolute';
 textToPlace.style.left = leftMargin;
 textToPlace.style.top = topMargin;
 textToPlace.style.width = rightMargin - leftMargin;

 textToPlace.style.visibility = 'visible';
 textToPlace.style.display = 'inline';

 var bottomMargin = textToPlace.offsetTop + textToPlace.offsetHeight + fixedRow.offsetHeight/4;

 fixedRow.style.height = bottomMargin - topMargin;
}//end showDimensions()
</script>
</head>
<body onload='changeDimensions()'>
<table id='fixedTable' border='1'>
<tr id='fixedRow'>
<td><div id='leftCol'>&nbsp;</div></td>
<td><div id='rightCol'>&nbsp;</div></td>
</tr>
<tr>
<td>Hello from the left column!</td>
<td>Hello from the right column!  I'm much longer than the left!</td>
</tr>
</table>
<div style='visibility:hidden;display:none;' id='textToPlace'>
Look at me!  I'm crossing boundaries! ...and taking up 3/4 of each of the cells I enter!
</div>
</html>

--Dave
 
Upvote 0 Downvote
Okay, I'm obsessing...

You don't need the DIV tags to contain the style tags and you don't need the javascript function to flip the style to visible and inline.

If, for some reason, your page loads slowly and the movement of the textToPlace isn't at the speed of light, then you might want to keep these and maybe even adjust the javascript function for the neatest possible build:

Code: 
function changeDimensions()
{
 var topMargin = fixedTable.offsetTop + fixedRow.offsetHeight/4;
 var leftMargin = fixedTable.offsetLeft + leftCol.offsetWidth/4;
 var rightMargin = fixedTable.offsetLeft + leftCol.offsetWidth + (rightCol.offsetWidth*3/4);

 textToPlace.style.position = 'absolute';
 textToPlace.style.left = leftMargin;
 textToPlace.style.top = topMargin;
 textToPlace.style.width = rightMargin - leftMargin;

 textToPlace.style.display = 'inline';

 var bottomMargin = textToPlace.offsetTop + textToPlace.offsetHeight + fixedRow.offsetHeight/4;
 fixedRow.style.height = bottomMargin - topMargin;

 textToPlace.style.visibility = 'visible';
}//end showDimensions()

Here's an example which pretends to load slow to show why this order might be preferred. Probably will not be an issue, but as long as I'm obsessing about it...

Code: 
<html>
<head>
<script>
var topMargin;
var bottomMargin;

function changeDimensions()
{
 topMargin = fixedTable.offsetTop + fixedRow.offsetHeight/4;
 var leftMargin = fixedTable.offsetLeft + leftCol.offsetWidth/4;
 var rightMargin = fixedTable.offsetLeft + leftCol.offsetWidth + (rightCol.offsetWidth*3/4);

 textToPlace.style.position = 'absolute';
 textToPlace.style.left = leftMargin;
 textToPlace.style.top = topMargin;
 textToPlace.style.width = rightMargin - leftMargin;

 setTimeout("textToPlace.style.display = 'inline';",1000);
 setTimeout("bottomMargin = textToPlace.offsetTop + textToPlace.offsetHeight + fixedRow.offsetHeight/4;",2000);
 setTimeout("fixedRow.style.height = bottomMargin - topMargin;",2000);

 setTimeout("textToPlace.style.visibility = 'visible';",3000);
}//end showDimensions()
</script>
</head>
<body onload='changeDimensions()'>
<table id='fixedTable' border='1'>
<tr id='fixedRow'>
<td><div id='leftCol'>&nbsp;</div></td>
<td><div id='rightCol'>&nbsp;</div></td>
</tr>
<tr>
<td>Hello from the left column!</td>
<td>Hello from the right column!  I'm much longer than the left!</td>
</tr>
</table>
<div id='textToPlace' style='visibility:hidden;display:none'>
Look at me!  I'm crossing boundaries! ...and taking up 3/4 of each of the cells I enter!
</div>
</html>

'think I need some coffee? :)

--Dave
 
Upvote 0 Downvote
Dave,

Thanks for all the info. I will try it out - but sounds like it will do the job.

Mighty
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

PeDa
  • Locked
  • Question Question
Display table td's as block element on mobile phone
Replies
3
Views
1K
spamjim
spamjim
lupidol
  • Locked
  • Question Question
Table's title row's rounded corners border
Replies
2
Views
406
lupidol
lupidol
ashokkumary
  • Locked
  • Question Question
missing leading zero when we download in excel from html table data.
Replies
1
Views
374
spamjim
spamjim
jason.lex
  • Locked
  • Question Question
Bootstrap grid and columns question
Replies
0
Views
293
jason.lex
jason.lex
PeDa
  • Locked
  • Question Question
Table not formatted correctly in all browsers
Replies
2
Views
480
PeDa
PeDa

Part and Inventory Search

Sponsor

Back
Top