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;
}
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/
I am trying out forms in HTML.
Fiddle
For the div #status, the CSS rules are-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40%;
}
But I cannot understand why the height of divison does not get altered by height rule in the CSS. More over If I try out-
#status{
margin:auto;
width:50%;
border:2px solid red;
background:white;
height:40px;
}
JSFiddle
This leaves the text on the bottom while div is placed at some random place.
Could some help with placing this division below E-mail ID field so that text appears inside it?
Also, which rule in my CSS is responsible for this positioning of div.
You're inserting the div under elements that are floating. You need to add clear: both to your #status CSS rules:
#status {
margin: auto;
width: 50%;
border: 2px solid red;
background: white;
height: 40%; /* or 40px, which will look slightly different. Your choice. */
clear: both;
}
Updated Fiddle
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
I have a link and an inline div next to it (to the right). I want the div to occupy the rest of the space to the right. Is there a way to do that?
what<div style="display:inline-block;width:200px;border:1px solid red">hello</div>
If you can wrap a span around the div, like:
what<span><div>hello</div></span>
jsFiddle example
You can apply this CSS to get what you're after:
a {
background: #ccc;
float: left
}
span {
display: block;
overflow: hidden;
padding: 0 4px 0 6px
}
div {
width: 100%;
display:inline-block;
border:1px solid red
}
You could wrap everything within a div and give it table and table cell to children:
http://jsfiddle.net/T4Qcd/
.inner{
border:1px solid red;
display:table-cell;
width:100%;
}
a{
display:table-cell;
}
.wrapper{
display:table;
}
You can do so by applying width to both anchor tag as well as the div.
a{
width:10%;
}
div{
width:90%;
}
Your html would be.
what
<div style="display:inline-block;border:1px solid red">hello</div>
I am trying to display an absolutely positioned div inside floating div.
Here is my HTML so far.
#outer
{
float:left;
width:500px;
border: 1px solid red;
}
#inner
{
left:0;
position:absolute;
border: 1px solid black;
width:100%
}
<div id='outer'>
<div id='inner'>
some text inside div
</div>
</div>
I have an outer div whose width is being set as percentage of its parent div. 'outer' div contains an absolutely positioned 'inner' div.
I want to make width of the inner div same as outer div which is not working. Can somebody suggest a way to do this?
Give position:relative; to your #outer div. write like this
#outer
{
float:left;
width:500px;
border: 1px solid red;
position:relative
}
check this http://jsbin.com/ifuxum/2/edit#html,live
#inner
{
left:0;
right:0;
position:absolute;
border: 1px solid black;
}