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
Related
I'm trying to make a table with 4 cels and in each cell an image. I'm trying with a test image now but whenever I put the size of the image in % (I want the image to resize with the window) the cel the image is in stays the width of the original image. So the image resizes, but the cel the image is in does not. Only width though, the height does resize. If I put the image size in px, it does work. But that's not what I want... I tried putting the image in my html code, but I get the same result. So I want the image size to be in % so that when you change the width of the window, the image resizes with it.
This is my code:
table,
tr,
td {
border: 1px solid black;
margin-left: 10%;
margin-bottom: 20%;
}
td {
margin: auto;
padding: auto;
}
.image1 {
background: url(../afb/test.png);
width: 50%;
height: 50%;
}
<!--pictures-->
<table>
<tr>
<td><div class="image1"></div></td>
<td>pic 2</td>
</tr>
<tr>
<td>pic3</td>
<td>pic4</td>
</tr>
</table>
I hope that this code will help you to solve this issue. Best regards.
table{
position:static;
border-collapse: collapse;
margin: auto;
margin-bottom: 20%;
width:90%;
height:90%;
}
tr , td{
border-collapse: collapse;
border:1px solid black;
margin-left: 10%;
margin-bottom: 20%;
}
td{
margin: auto;
padding: auto;
}
div.image1 {
position:relative;
content: url(http://pirson.me/stackOverSamples/medias/brume.jpg);
width: 100%;
height: 100%;
}
<table>
<tr>
<td>
<div class="image1"></div>
</td>
<td>
pic 2
</td>
</tr>
<tr>
<td>
pic 3
</td>
<td>
pic 4
</td>
</tr>
</table>
Here is my DOM:
<html>
<body>
<table>
<tr>
<td>
hello
</td>
</tr>
</table>
</body>
</html>
and my CSS:
html, body {
height: 100%;
width: 100%;
}
table {
height: 100%;
width: 100%;
}
td {
border: 1px solid gray;
height: 10%;
width: 10;
}
What I want to do is to re-size the height and width of the TD element using percentage. But this code doesn't work. I understand that the size of a child element will inherit the size of it's parent element. So TD will inherit the size from TABLE and then TABLE from BODY or HTML parent elements. My code doesn't do that. But if I do width: 10%; on TABLE, then it gets 10% of the width of the BODY/HTML element. Same as with the height: 10%. But why doesn't it work on TD tag?
td tags are forced to take up all of the remaining space in their parent.
So, your width: 10%; is completely ignored by the layout.
See this non-working JSFiddle Demo.
But, if we add some display: inline-block; to the td, then it fixes the problem.
See this (now) working JSFiddle Demo.
I suggest you add another td tag, and give it a width of 90%
<table>
<tr class="tr1">
<td class=td1>
hello
</td>
<td class="td2"></td>
</tr>
<tr class="tr2">
<td></td>
</tr>
</table>
CSS:
html, body {
height: 100%;
width: 100%;
margin:0;
}
table {
height: 100%;
width: 100%;
}
td.td1 {
border: 1px solid gray;
height: 10%;
width: 10%;
}
td.td2{
border: 1px solid gray;
width: 90%;
}
tr.tr1{
height:10%;
}
tr.tr2{
height:90%;
}
For the height, you will need to add another tr row, and give it a 90%. Give the first row a 10% height like you wanted to do with the td - http://jsfiddle.net/R5uRW/6/
I need to center a div vertically and horizontally, and have its size be a certain percentage of the whole page (say 80%).
I can do this with vh and vw units (link)
<style>
html, body
{
height: 100%;
width: 100%;
margin: 0;
}
body > div
{
position: absolute;
background-color: red;
top: 10vh;
left: 10vw;
width: 80vw;
height: 80vh;
}
</style>
<div></div>
...or with old table design (link)
<style>
html, body
{
margin: 0;
height: 100%;
}
#center
{
background-color: red;
}
</style>
<table height="100%" width="100%">
<tr height="10%"></tr>
<tr>
<td width="10%"></td>
<td id="center"></td>
<td width="10%"></td>
</tr>
<tr height="10%"></tr>
</table>
But I would like to support a div version. Can anyone provide any help?
A common way of displaying a divider in the middle of a page is to display it as a table with a table cell:
<body>
<div id="wrapper">
<div id="inner">
</div>
</div>
</body>
html, body { margin:0; height:100%; }
body { display:table; width:100%; }
#wrapper { display:table-cell; vertical-align:middle; height:100%; width:100%; }
#inner { height:50%; width:50%; margin:0 auto; }
JSFiddle example.
In this example, #inner is 50% width and height of #wrapper which is 100% width and height of the page body.
As #wrapper is displayed as a table-cell within a body displayed as table, the content within will be affected by the vertical-align:middle property, causing the #inner divider to be in the vertical middle of the page.
Applying margin:0 auto; to the #inner divider then aligns it to the horizontal middle.
The beauty of this is that you don't need to worry about offsetting the #inner divider, and aren't limited to just using percentage widths. Fixed widths will still be aligned in the middle of the containing #wrapper.
This is supported on all modern browsers: http://caniuse.com/#feat=css-table
I have a table. Its <td> have overflow: auto.
The width is set to be 100px. In Firefox only, text that exceeds 100px is not hidden and replaced with a scrollbar.
How can I hide content and have a scrollbar when it exceeds the width of its container?
http://jsfiddle.net/be6tM/10/
this question from here maybe solve your problem
nickb answer: "Try wrapping it in a <div>. I'm pretty sure the overflow attribute is not defined for a <td> element, at least in HTML4 it's not."
try to put your overflow:auto to the wrapper hope this can help you
pre, div {
width:100%;
overflow: auto !important;
}
working demo
The easier way to do this would be to add this to the Html
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
and this to the CSS
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
Working Example:
div {
overflow:auto;
}
td {
border: 1px solid rgb(0,0,0);
min-width: 100px;
max-width: 100px;
}
<table>
<tr>
<td class="first">
<div>Don ovonMrLongNameIsMe!!!</div>
</td>
</tr>
</table>
I have a table cell with an anchor tag and I want the width (and height) of the anchor tag to fill the width of the containing table cell. Intuition doesn't seem to work on this. Please help.
HTML:
<table>
<tr>
<td class="width_is_100px">
<span class="make_width_100px">Some Text</span>
</td>
</tr>
</table>
CSS: (doesn't work)
.make_width_100px {
width:100px !important;
}
The anchor tag is only as wide as the text "Some Text". I want the user to be able to click anywhere inside the table cell and trigger the link. No javascript please.
Try it:
a {
display: block;
height: 100%;
width: 100%;
}
Make your <a> element a block element (it's inline by default):
.width_is_100px a {
display:block;
}
None of these answers work properly to fill the width and height when the text wraps.
The only answer I found that produces a proper result filling the height and width of the cell right to the edges is this one:
td {
overflow: hidden;
}
td > a {
display: block;
margin: -10em;
padding: 10em;
}
<table>
<tr>
<td class="width_is_100px">
<div style="width:100%;">Some Text</div>
</td>
</tr>
</table>
this is probably too late but, this worked for me in tables with different content height.
html
<table class="example">
<tr>
<td>small content</td>
<td>multiline<br>content</td>
<tr>
</table>
css
table{
padding:10px; /*for example*/
}
table.example td{
overflow:hidden;
padding:0px; /*you can need !important*/
}
table.example a{
display: block;
height: 100%;
width: 100%;
padding: 10px 10px 500px 10px; /*table default padding except on bottom 500px for example*/
margin-bottom: -490px; /*same as bottom padding - table padding*/
}