Please see the following example:
http://jsfiddle.net/6t6hq/7/
when I use td with position relative to move it,
it only move the content but not the border.
How can I move the border with the content?
<table>
<tr>
<td id="relativeTD">1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<div id="expected">expected</div>
<style>
td{
border:1px solid #000;
min-width:100px;
}
#relativeTD{
position:relative;
left:60px;
}
#expected{
border:1px solid #000;
position:relative;
left:60px;
}
</style>
TD is of display: table-cell;!
So you can't move it using relative positioning. Instead, create another <div> inside the <td> and give border and stuff.
Instead, give position: absolute for the td. It works! Also, you need to give position: relative to the table.
Fiddle: http://jsfiddle.net/6t6hq/9/
Else, you can use margin-left too to the td.
You cannot move a single td border you need to move the whole table
Demo
table {
margin-left: 60px;
}
Either what you can do is give your table border: 0;, place a div inside your td
give it some width, border and position: relative with left: 60px; and you are good to go
Related
Why top/bottom border on <td> sticks out by 1px when table's container has certain width and when table is centered ?
Picture shows the problem:
HTML:
<body>
<table>
<tr>
<td style=" border-top:4px solid green;border-right:4px solid green;">data 1
<td>data 2
</table>
</body>
CSS:
table{
margin:10px auto;
border-collapse:collapse;
text-align:center;
line-height:30px;
}
td{
background-color:silver;
width:100px;
}
You are not closing the <td> and <tr>:
<td style=" border-top:4px solid green;border-right:4px solid green;">data 1
<td>data 2</td>
</tr>
Also, add the following CSS for:
Making borders even.
Making to use border-box layout.
CSS:
* {box-sizing: border-box;}
td {
background-color: silver;
width: 100px;
border: 4px solid silver;
}
Note: You might need to tinker a bit to get the right output. We can just advice you on the right direction.
Preview
Fiddle: https://jsfiddle.net/2vdf28xd/
It's because the width and height by default is calculated by the browser with
width = width + border left + border right + padding left + padding right
height = height + border top + border bottom + padding top + padding bottom
To avoid this, make sure the calculations are absolute with
td {
box-sizing: border-box;
}
Good luck!
I've figured out that this is a BUG in older versions of Firefox.
This behaviour does not happen in new FF version and other browsers.
You can add the following attribute for the table you might be using:
<table border="1">...</table>
Adding the border="1" attribute we can remove this 1px sticking out problem.
Quick question. I have a table, it has a border. When I add padding, it adds the padding from the inside of the table. Any way to make it add padding from outside the border?
Essentially, the table border lines should appear to be within its cell.
Im not 100% sure what you mean but you may want this.
HTML:
<table>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</table>
CSS:
body {
padding: 20px;
}
table {
width: 400px;
height: 400px;
outline:2px solid red;
outline-offset: -15px;
}
td {
border:2px solid blue;
}
Table only:
DEMO HERE
Cell only:
DEMO HERE
So here we are setting an outline and you can put an outline-offseton it. So this will bring it into the table if you use - value. Use it as a border but remember it doesn't count towards width or height.
Note: You can use this on each cell etc.
if i understand you right then you should use margin not padding.
I am trying to append some content to a th container where the text is centered. I want the new content to be at the very right of the container, and keep the current text centered.
|--------content--------|
to
|--------content-------a|
where a is the new content.
I have seen a couple of similar posts, but can't find one that is relevant. I can easily do a float left , right, clear both to keep a on the right and content on the left, but I specifically want to keep content where it is. Also, I don't want content to be shifted to the left due to the presence of a if possible.
Try the following. Use position: relative on the th and then use absolute positioning for the appended element, b in my example.
table {
border: 1px dotted blue;
width: 100%;
}
table th {
position: relative;
}
table th div {
position: absolute;
top: 0;
right: 0;
border: 1px dotted gray;
color: red;
}
<table>
<tr>
<th>Centered Content <div>A</div></th>
</tr>
</table>
I think this is what you need.
<table width="200px" border="1">
<tbody>
<th> <span style=" text-align:center;">content </span><span style="float:right;">1</span>
</th>
</tbody>
</table>
I have run into a problem with position:relative on th elements in FireFox.
In Chrome and IE the th element is a valid offset parent for absolute positioned elements.
<div class="relative">
<p>fill some spacing</p>
<table>
<tr>
<th>
Hello?
<div id="absolute">Is it me you're looking for</div>
</th>
</tr>
</table>
</div>
.relative {
position:relative;
border:1px solid green;
}
th {
position:relative;
border:1px solid red;
}
#absolute {
position:absolute;
top: 0;
left: 100px;
width: 200px;
border: 1px solid blue;
}
http://jsfiddle.net/ntQqL/2/
In FireFox the #absolute element is positioned at the very top of the .relative, in Chrome and IE it is positioned at the top of the th, like I expected.
Is this a well-known difference, or am I doing something wrong?
It probably has to do with the way the display and position properties are handled...
If you put a display:block on your th, it will work.
Christiaan answer also works.
But I guess the best way to fix this issue would be to put a relative positionned div inside your th.
It does seem to work when you put position:relative on the table instead of the th. Maybe that could be used as a workaround in your situation?
I'm not really sure what I need here but I want to position a div at the bottom of a nested table.
I have an outer table that is 100% wide and no height attribute. I have another table within that outer table where I am using the div. I want the div content to rest on the bottom of the inner table. I currently have the div in a <td> tag.
I've tried to use position:absolute; bottom:0; left:0; but it puts the div and its content at the very bottom of my screen.
How can I do this?
BTW: I know that I should be using 100% css on this project but I'm making a gradual transition. :)
Here is my code for the div
#messageBox {
width:95%;
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
}
Here is the table code
<table cellpadding="0" cellspacing="0" border="0" style="width:60%;margin-left:auto;margin-right:auto;margin-top:30px;border:0px solid">
<tr>
<td colspan="2" style="height:85px;"><div id="messageBox">test</div></td>
</tr>
</table>
You need to set the <td> element in question to position: relative;. This way any absolutely positioned element will be positioned relative to it.
#messageBox {
width:95%; /* wrong calculation when you add with margin/padding makes overflow */
height:35px;
margin:10px;
padding:10px;
font-family:Arial;
font-size:18px;
border:1px solid red;
}
<table>
<tr>
<td colspan="2" style="height:185px; border:1px solid black; vertical-align:bottom;">
<div id="messageBox">test</div>
</td>
</tr>
</table>
I changed your td's height from 85px to 185px to make it obvious.
Preview:
Request (not overflow):
I'm using additional wrapper.
<table>
<tr>
<td colspan="2" style="height:185px; border:1px solid green; vertical-align:bottom;">
<div style="overflow:hidden; border:1px solid red;">
<div style="border:1px solid black; float:left; width:100px; margin:10px; padding:0px;">Test</div>
</div>
</td>
</tr>
</table>
Preview:
Oh the joys of working with tables. It seems that this won't work unless you set the display property of the table to block
You can try giving the outer innermost (my eyes failed me, sorry) table this style:
position: relative;
display: block;
You'll also need to add back in the position: absolute (I see you've taken that out, that is actually the correct method to use for this)
#messageBox {
position: absolute;
bottom: 0;
}
Do remember that this will change how the table works, and will probably break your site. See: http://jsfiddle.net/5xTXU/