I am trying to align my child element border inside a td to the same width of the td border.
For example
<table class="table">
<tr>
<td>abc</td><td>edc <div class="child"></div></td><td>test</td>
<td>test</td>
</tr>
<tr>
<td> test </td><td>45g</td><td>block</td><td>test</td>
</tr>
<tr>
<td>test</td><td>test</td><td>swap</td><td>test</td>
</tr>
</table>
CSS - with bootstrap.
table {
border-collapse: inherit;
border-spacing: 5px;
}
.table>tbody>tr>td {
position:relative;
border:solid 3px red;
padding:0;
}
.child {
border-left:solid 3px green;
border-right:solid 3px green;
width:100%;
height:10px;
}
http://jsfiddle.net/tfjm7L5y/4/
Basically, I want to show child element of the td border cover the td border so green border is on top of red border. Is it possible?
Instead of setting a width of 100%, try letting a block style display handle the width, then set a negative margin for the width of the border:
.child {
border-left:solid 3px green;
border-right:solid 3px green;
height:10px;
margin: 0 -3px;
}
Check it out here: http://jsfiddle.net/tfjm7L5y/7/
You could set the position of the div to absolute, get rid of the width, and then just set the left and right properties equal to the width of the border so that it overlays the table cell. Add:
position:absolute;
bottom:0;
left:-3px;
right:-3px;
jsFiddle example
Related
Given this table:
<table>
<tr>
<td rowspan="2"><a>Hello</a></td>
<td><a>World</a></td>
</tr>
<tr>
<td><a>!</a></td>
</tr>
</table>
I want to style the a element in every td to be 100 percent height:
table, td {
border: 1px solid black;
}
td {
height:400px;
}
a {
background-color: red;
height: 100%;
display:block;
}
This (JsFiddle) works fine on IE and Chrome. However Firefox seems to have a problem with the colspan.
So I tried to change the given fixed height on tr instead of td:
table, td {
border: 1px solid black;
height: 100%
}
tr {
height:400px;
}
a {
background-color: red;
height: 100%;
display:block;
}
This (JsFiddle) works fine on Firefox and Chrome, but not on IE.
On the right side is, what I want:
How can I make this work in all Browsers?
if you want more control over the TDs, i would highly suggest to use the display option of table and table-cell:
.table-wrapper{
position:relative;
display:table;
width:100%;
height:400px;
border:1px solid #000;
}
.table-wrapper a{
position:relative;
display:table-cell;
height:100%;
text-align:center;
vertical-align:middle;
}
you can easily choose the width, and control the content of "table-cell". This is supported by IE9.
link of demo:https://jsfiddle.net/keinchy/mq3nafje/6/
https://jsfiddle.net/oo73ohtr/
HTML:
<div class="foo">
<table>
<tr>
<td>bar</td>
<td>baz</td>
</tr>
</table>
</div>
CSS:
.foo {
width: 300px;
overflow: auto;
}
td {
border: 1px solid #000;
width: 200px;
}
I would like every td to be 200px wide and .foo to get a vertical scrollbar.
Instead the table gets shrunk to the size of .foo and the td shrink to fit the space available.
What am I doing wrong?
Setting it to min-width instead of width should do the trick.
td {
border: 1px solid #000;
min-width: 200px;
}
I know there are a lot of answers out there about this problem. But I can't seem to get it. Here is my example:
http://jsfiddle.net/xyJkc/2/
see the first div does not fill the total height of the td. I want the divs in each td to fill up the complete height no matter how much, or how little, text is in each one.
I guess the unclear thing is that the height of each row is not explicitly defined, but it is defined by the maximum height of the content of the cells.
Thanks the help!
here's the code:
html:
<table>
<tr>
<td>
<div>text</div>
</td>
<td>
<div>many lines of text. More and more.</div>
</td>
</tr>
</table>
css:
table {
width:100px
}
td {
border: 1px solid grey;
height: 100%;
}
div {
height: 100%;
border: 1px solid;
}
please try:
the div will be 100%; height.
div{
height: 100%;
border: 1px solid;
display:inline-block;
}
can you add display:inline-table;
div{
height: 100%;
display:inline-table;
border: 1px solid;
}
http://jsfiddle.net/xyJkc/13/
You can set a height on the table or tr. Then the div will fill the whole td.
Example:
tr{
height: 5em; /* or px */
}
I think it's because your div has position value set to static (by default). You can fix it by giving position:absolute; property to the tr or if you don't want to do this you can use jQuery:
$(function()
{
$('div').height($('tr').height());
});
I have a <table> with 3 cells (<td>), each cell with 150px width and 100px height. I placed a <a> having height 100px, width 200px, display:block, inside a cell. But then the table cell resized into 200px showing the entire div. But I just want to see only a portion of div and the cell may remain as such, 150px wide.
html;
<table class="mytable">
<td class="cell">
<a class="wrapper">sometext</a>
</td>
<td class="cell">aa</td>
<td class="cell">bb</td>
</table>
css;
.mytable{
table-layout:fixed;
}
.mytable tr td{
width: 150px;
height: 100px;
overflow: hidden;
}
.wrapper{
display: block;
width: 200px;
height: 100px;
}
How can I do this?
Basically you add a position: 'relative'; to the td's and a position:'absolute'; to the span or anchor tags.
HTML:
<table>
<tr>
<td><a>Hello</a></td>
<td><a>World</a></td>
<td><a>Hi</a></td>
</tr>
</table>
CSS:
a {
display:block;
width:200px;
height:100px;
position:absolute;
background-color:green;
}
td{
position:relative;
overflow:hidden;
width:150px;
height:200px;
}
Here is the result
Is there any way at all to make a table-cell smaller than its contents using purely css, and without altering the DOM?
Setting the width of a td to smaller than its child only makes it as large as its child for me. I also tried adding table-layout:fixed to the table but that didn't make any difference.
HTML:
<table>
<tr>
<td><div/></td>
<td class="mycell"><div/></td>
<td><div/></td>
</tr>
CSS:
table {
table-layout:fixed;
}
td {
border:3px solid black;
}
div {
border:3px solid red;
width:50px;
height:50px;
}
.mycell {
width:20px;
jsfiddle:
http://jsfiddle.net/clox/EzKNy/
Yes, that is possible. But you have to use the value max-width instead. So it reads:
.mycell {
max-width: 20px;
}
If you make inner div position absolute and outter td position relative, it will take inner div out of normal flow.
http://jsfiddle.net/EzKNy/2/
td {
border:3px solid black;
position:relative;
}
div {
border:3px solid red;
width:50px;
height:50px;
position:absolute;
}