I have a small problem. I've got table like this
<table border="1">
<tr style="position:relative;">
<td>
Click here to redirect yourself
<span onclick="ajax_redir();" style="position:absolute;right:5px;">
AJAX
</span>
</td>
</tr>
</table>
my problem is that AJAX is placed in the right corner of my screen. What am I doing wrong?
(I am trying to make AJAX text in corner of actual
<td></td>)
demo of my problem http://jsfiddle.net/ehtwW/
It is actually kind of strange, but it seems that if you wrap all the contents of the td in a div it will work.
Just like this: http://jsfiddle.net/Gm5fg/1/
The TD has to be relatively positioned. For the TR it is not necessary:
<table border="1">
<tr>
<td style="position:relative;">
Click here to redirect yourself
<span onclick="ajax_redir();" style="position:absolute;right:5px;">
AJAX
</span>
</td>
</tr>
</table>
Related
Currently trying to align an image to the bottom of it's table. At present it reverts to the top naturally. I've tried everything but the image still sits to the top of the table.
</table>
<td class="logo-label">
<table>
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" height="36" width="113">
</td>
</table>
I know it will be something simple but at the moment I cannot get my head around why the image isn't moving.
First of all, the HTML structure is completely wrong. <td> and </td> are table cells, so they lie between <tr> and </tr> (table rows). <tr> and </tr> lie in between <table> and </table> (the table itself). The structure of a table is shown below:
<table>
<tr>
<td>Cell contents here</td>
</tr>
</table>
You can have as many <tr>s and <td>s as you wish.
A table by default has no width. Put in another way, its width is set to auto, i.e. it takes the width of its contents. Set the width and height attributes to avoid this. A table also has no borders by default. Set border="1" to make the borders visible.
To align an image to the bottom of its parent element (<td> in this case), one way to do it is to set position:relative for the parent element and set position:absolute for the child element. Then, set bottom:0 for the child element. The image will then be aligned to the bottom of the element. The snippet below sums up the whole process.
<table border="1" width="500" height="300">
<tr>
<td style="position: relative">
<img style="position:absolute; bottom:0" src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
There may also be some rules in your logo-label CSS rule, which we don't know about.
First of all, that is a real mess you have. Secondly, you need to look at your CSS file and look up what "logo-label" is doing. That is controlling the alignment of the image.
<table>
<tr>
<td class="logo-label">
<img src="http://strawberry.wpdevcloud.com/wp-content/uploads/2018/06/smllnat_logo.jpg" alt="Natural Complexions" height="36" width="113">
</td>
</tr>
</table>
I have a very simple HTML table which has one row and two cells. The first cell has a hyperlink which should cover both cells. How could I get my hyperlink to cover the second td of my table?
Here is my HTML code:
<table>
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
Now my hyperlink only covers the first td, but not the second one. What could be done?
I do not want to use JavaScript. I do not want to copy the link to both table cells.
as a link in each td is not a good alternative and using js is a bit dirty, here is another html/css approach:
HTML:
<div class="table">
<a class="table-row" href="/mylink">
<div class="table-cell">...</div>
<div class="table-cell">...</div>
<div class="table-cell">...</div>
</a>
CSS:
.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }
Here is a working JSFiddle
Personally, I would prefer to put a seperate link in each td that points to the same URL, to keep things simple:
<table>
<tr>
<td>
<a href="http://url/stuff">
First column
</a>
</td>
<td>
<a href="http://url/stuff">
Second column
</a>
</td>
</tr>
</table>
<table style="position: relative">
<tr>
<td style="width:100px;padding:0">
Yes
</td>
<td style="width:30px;padding:5px">Oh yeah</td>
</tr>
</table>
By making the link absolute you pull it out of it's layer and by giving it a width of 100, the link extends to the next TD element.
To prevent the anchor tag from overflowing, give the table a relative position to confine the absolute element to the table width.
Here is a JSFiddle
I have a table structure like below:
<table>
<tr>
<td>
<div id="FirstDiv">
<table>
<tr>
<td>
</td>
</tr>
</table>
</div>
</td>
<td>
<div id="SecondDiv">
</div>
</td>
</tr>
</table>
The structure of FirstDiv and SecondDiv are same. The td tag inside FirstDiv contains some text and I am showing the text (Text is dynamic one,it is coming from back end.) using anchor tag but if the text is more wider than 150px, it is pushing the border to right. According to requirement, there should not be any horizontal scroll bar so, I tried to wrap the text inside the anchor tag, giving styles like word-wrap:normal, but till now not able to fix it. Its either giving me a horizontal scroll bar or pushing the border to right.
Thanks in advance.
Try this:
table {table-layout:fixed}
td {width:50%}
I have a table that is split into 3. My problem is I have content on the left side and pic on the right side. When I open the page the pic is starting in the middle of the page I need the pic to be displayed at the top of the page. How can I do that?
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td >
<table> Lots of Content </table>
</td>
<td width ="10%">
<table> Empty table (that gives space between left content and right image </table>
</td>
<td width = "20%">
<table width="100%">
<tr>
<td> <Asp:Image Runat="server" Id="Image" align="top"> </td>
</tr>
</table> </td>
</tr>
</table>
If you really want / need to keep the existing structure and look for a quick and dirty fix, then set the position of the Image to absolute and with top and left position it exactly where you want.
Use this page to figure out what kind of positioning you want (not sure from post) http://www.w3schools.com/css/css_positioning.asp
And then embed the code like this:
<head>
<style type="text/css">
img
{
[Style properties you pic]
}
</style>
</head>
Or consult css_howto and use a proper CSS file for you entire page layout (no more tables)
that's easy... here's the hack... add a class to the td
.positionhack {position:relative}
then on the image
.positionTop {
position:absolute;
top:0;
}
Here is a 3x3 table:
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
<div onclick="alert('2');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</div>
<div onclick="alert('3');" style="position:absolute;font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</div>
</td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
If you cut-and-paste that code into an html file and open it in your browser, you will see that the div's act as an overlay onto my grid. This is sort-of like a Scheduling control (the grid represents each hour block).
The thing that's driving me crazy is that the I can't get the text inside the div tags to become vertically aligned in the middle. The actual td tags, no problem. But the div tags inside the td tag - nope!
I've read and tried everything here: http://phrogz.net/css/vertical-align/index.html
I've tried (as a style for the div): padding, margins, line-heights, etc.
EDIT: I think there is some confusion on the intent of this grid. The reason I use the div tags is to overlay "the yellow bar" over the grid. That means there could be multiple "yellow bars" inside of one td cell or it can span multiple cells. For example, my original html (assuming the first column is 12:00 AM) has three events in that first row. Event 1: 12:00 AM - 12:30 AM. Event 2: 12:45 - 1:00 AM (both in the same cell). Event 3: 1:15 AM - 3:00 AM (and it has overlapped two cells). Stuff like that. That's why the div tags.
Is there a single line in the div, try setting the line-height of the container to the same as the height of the container.
<div onclick="alert('1');" style="position:absolute;font-size:16px;line-height:24px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</div>
Here's a dramatically cleaned up version of your code with what I think is the answer you're looking for.
Edit:
http://jsfiddle.net/FXFF8/24/
The position:absolute takes your divs out of the flow of the table, and makes them ignore the standard vertical-align.
You might be able to fixed it by using spans instead of divs, and using position:relative instead of absolute.
Something like this:
http://jsfiddle.net/3s4VE/
Assuming you are asking how to get the content of the divs vertically centered within the divs.
Set the line-height to be the same as the height. Right now you have line-height:14px; height:24px.
Here's what it looks like if you set line-height:24px: http://jsfiddle.net/NytYh/1/
adding the event to the "TD" instead of div's wouldn't work for you?
<html>
<body style="overflow:hidden;">
<style>
div.table_div {overflow:scroll;width:378px;height:117px;position:relative;}
table.TheTable {width:361px;height:100px;table-layout:fixed;border-collapse:collapse;border:1px solid #000000;}
td.TheTableColumnCell {font-size:16px;line-height:14px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;border:1px solid #000000;}
</style>
<div class="table_div" id="table_div">
<table class="TheTable">
<tr id='firstTr'>
<td class="TheTableColumnCell">
<span onclick="alert('1');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:0px;top:4px;width:60px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 1</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('2');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:90px;top:4px;width:30px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 2</span>
</td>
<td class="TheTableColumnCell">
<span onclick="alert('3');" style="font-size:16px;line-height:14px;background-color:#FFFF00;left:150px;top:4px;width:210px;height:24px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap;">Event: 3</span>
</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
<tr>
<td class="TheTableColumnCell">I'm</td>
<td class="TheTableColumnCell">Vertically</td>
<td class="TheTableColumnCell">Aligned Middle!</td>
</tr>
<tr>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
<td class="TheTableColumnCell"> </td>
</tr>
</table>
</div>
</body>
</html>
I guess that I understood. rs.
you can try this code:
<td align="center" valign="middle">
The align define the horizontal alignement and the Valign define vertical one.
got it?
regards!
Try this: vertical-align:text-top; text-align:center
http://jsfiddle.net/UxZr3/2/