I thought this'd be very simple.
All I want is to set the height of td and th cells according to the CSS below.
td, th{ height: 18px;
width: 16px;
padding: 34px;
border: solid black 4px;
}
I have tried overflow: hidden.
I have tried height: 100%.
I have tried white-space: nowrap.
PLEASE tell me there's something other than <td><div></div></td>
No matter what I do, the td and th heights are always 0px.
How can I set those heights to 18px?
Related
This question came to my mind not because i am doing a project or something. It just popped up in my head.
I have read (from some posts on stack overflow) that position:relative does not affect table elements and that top,left,bottom,right wont work.
I tried this and found that it does affect the th element as shown in below snippet in some way. top and left properties actually worked on th.
But one thing isnt so clear about this effect, why is it that the border of the th stayed at its place and only the th migrated??? Any ideas as to why this happens?
I would really like to know if the border could be moved along with the th.
table {
border-collapse: collapse;
}
th {
border: 4px solid green;
position: relative;
top: 30px;
left: 30px;
}
<table>
<tr>
<th>THIS</th>
</tr>
</table>
Here is a fiddle
Setting position on tr, th, td elements is not a cross-browser idea. so instead of that, put your content inside a container inside your th element and position relatively that container.
<th><div>THIS</div></th>
And the style would be:
th > div { border: 4px solid green;position: relative;top: 30px;left: 30px; }
Working Fiddle
You just need to add display: block; to your th and it gets the position. You cannot position the th alone since it just moves the content.
table {
border-collapse: collapse;
}
th {
display: block;
border: 4px solid green;
position: relative;
top: 30px;
left: 30px;
}
<table>
<tr>
<th>THIS</th>
</tr>
</table>
I cannot work out why some of the images on this page are wrongly sized (2 of them appear smaller than the others).
https://www.violinschool.org/video-testing/
I have re-cropped them all to the same size (355x200, ratio 16:9) so there must be something else causing it.
Am trying to check the html and CSS (it's a wordpress site using Toolset Types) to see what might be wrong, but to no avail.
Try adding this line to your CSS file and see if it helps:
table.wpv-loop.js-wpv-loop td {
width: 25%;
}
As <td> in table are not fixed width they get the width according to the content inside it untill the width is not defined in css.
You can do it with 2 solutions.
First is Add table-layout:fixed in table.
table{
border-bottom: 1px solid #ededed;
border-collapse: collapse;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
table-layout: fixed;
}
Adding table-layout:fixed will restrict the table to show each cell with same width.
and second Use width in <td>
As you are using exact 4 <td> in one row so you can give width manually width:25%.
td {
border-top: 1px solid #ededed;
padding: 6px 10px 6px 0;
width: 25%;
}
Problem is not in images but in table. Now each table-cell is taking dynamic width according to its content. If one table-cell has more content it will be wider than others.
Add table-layout: fixed property on table then all table-cell will take equal width and your problem will be fixed.
table {
border-bottom: 1px solid #ededed;
border-collapse: collapse;
table-layout: fixed;
border-spacing: 0;
font-size: 14px;
line-height: 2;
margin: 0 0 20px;
width: 100%;
}
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());
});
This is probably the most unusual CSS behavior I have ever seen:
I have an extremely simple table that consists of two cells - one with plain text and another with a link:
<div class="content">
<table>
<tr>
<td>
Hello, world!
</td>
<td>
Hello, world!
</td>
</tr>
</table>
</div>
I have also applied the following CSS to the table:
div.content {
background-color: green;
height: 100px;
}
table td {
background-color: red;
height: 50px;
}
table td a {
background-color: orange;
box-sizing: border-box;
display: block;
height: 100%;
padding: 8px;
width: 100%;
}
When rendered in Chrome 28, I see the following:
Why is there a large amount of red above and below the link? I have specified height: 100%; for the link, so it should be taking up the full height of the <td>, which has an explicit height.
It's definitely an issue with the box-sizing:border-box attribute. My guess is that putting that inside a table cell (which is treated differently then a div) is confusing the browser. Often, new techniques + old techniques don't mix.
I would suggest doing the following:
table td a {
background-color: orange;
display: block;
height: 100%;
padding: 8px;
}
The width:100% was unneeded since the table cell already expanded to the text width + padding width. For some reason, it doesn't seem to add the padding to the height 100% with the table cell (go figure, weirdness with tables! lol). If you need it to expand to a larger table cell width, I would suggest then putting the width:100% back but then ditch the horizontal padding (i.e. put padding:8px 0px;).
As far as I think its the box-sizing attribute causing this, change your css to:
table td a {
background-color: black;
height: 100%;
display:block;
margin: 0;
padding: 0px;
width: 100%;
padding-top: 12px;
}
Hope that helps;
Add This Code to table td:
display:inline-block;
because There is some difference between tables and divisions in box modeling.
you must set display-block on any none-block element for apply box-model style.
Try setting height in px for a as
table td a {
background-color: orange;
box-sizing: border-box;
display: block;
height: 50px;
padding: 8px;
width: 100%;
}
here's an example of a jury-rig: http://jsfiddle.net/rTAwd/
We're using a line height to adjust the cell's height, so we don't need to mess with vertical alignment, and relying on a wrapper div to provide our background and padding.
<div class="content">
<table>
<tr>
<td>Hello, world!</td>
<td>
<div> Hello, world!</div>
</td>
</tr>
</table>
</div>
css
div.content {
background-color: green;
height: 100px;
}
table td {
background-color: red;
}
table td div a {
line-height: 2em;
}
table td div {
background-color: orange;
padding: 8px;
}
I think its a bug, i had the same issue a while ago, if you want the text to vertically align in the middle, instead of using display:block on the <a> tag use display:table and use border-spacing instead of padding, like this:
table td a {
background-color: orange;
display: table;
height: 100%;
border-spacing: 8px 13px;
}
I removed the width:100% too since it will do it by default, you can see an example here.
border-spacing is the CSS property for cellpadding.
I have a very basic CSS question.
I have a div with fixed height and I have a table inside that div.
The content of the table will not fit in the div unless the div gets a scrollbar. The problem is now,
the content of the table is overflowing the div as its height is more than the height I set on the div.
This is what I have for the Div
display: inline-block;
float: left;
max-height: 200px;
Here is an example.
jsfiddle
How do I get the table to fit in the div and have a scrollbar? This is not specific to any browser. I tried both in Chrome and IE myself.
[edit] Quoting your request:
How do I get the table to fit in the div and have a scrollbar.
Add the following to .test (fiddle)
overflow-y:scroll;
Documentation for overflow-y
.test {
background-color: gray;
display: inline-block;
float: left;
max-height: 200px;
overflow-y: scroll;
}
.matrix td, .matrix th{
border: 0.1em solid #E2E2E2;
padding: 4px 2px;
min-width: 65px;
white-space: normal;
text-align: center;
}