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>
Related
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 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?
In the following code I tried to make a long table scrollable ( with <thead> fixed ).
But the columns are not filling the table's width anymore, and thead columns are even not aligned with tbodys ones.
How to solve this ? is there another way to do the trick.
The code is here
<table>
<thead>
<tr>
<th>ROW 01</th>
<th>ROW 02</th>
</tr>
</thead>
<tbody>
<tr><td>LINE 01</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 02</td><td><img src="http://placehold.it/90x90"/></td></tr>
<tr><td>LINE 03</td><td><img src="http://placehold.it/90x90"/></td></tr>
</tbody>
</table>
CSS here
table{width: 100%; background: #efefef; border-collapse: collapse }
thead, tbody{display: block}
thead{background: #555; color: white;}
tbody{height: 120px; overflow: auto}
td, th{ border: 1px solid red; }
You can try to turn your <tr> in display:table;+table-layout:fixed; It will help but columns may break from a row to another unless you set a fixed width to one or the other cell.
DEMO
Your CSS turns like:
table {
width: 100%;
background: #efefef;
border-collapse: collapse
}
thead, tbody {
display: block
}
thead {
background: #555;
color: white;
padding-right:1em;/* average width of the scroll bar of tbody */
}
tbody {
height: 120px;
overflow: auto
}
tr {/* here make those the table */
display:table;
table-layout:fixed;
width:100%;
}
td, th {/* set a width to go along with table-layout */
border: 1px solid red;
}
add this to your CSS
td:nth-child(1), th:nth-child(1) { min-width: 200px; } /* or the width you need, you may use percentages */
td:nth-child(2), th:nth-child(2) { min-width: 200px; }
since the browser adds a scrollbar, it needs to add the space for that element, thus, the misalignment will ALWAYS happen. The good news is that, in fact, you need to declare only the first column, so if you plan to use only 1 columns, just use something like this:
td:nth-child(1), th:nth-child(1) { width:20%; min-width: 200px; }
and it will be enough.
There's no way that I know to do this without declaring the width for AT LEAST the first column
try
thead, tbody{display:auto}
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.
This fiddle demonstrates the issue: http://jsfiddle.net/wrYsx/
Related code:
<style>
#floater {
background-color: red;
height: 35px;
width: 35px;
float: right;
}
table {
width: 100%;
}
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
}
</style>
<table>
<tr>
<td>
<div id='floater'></div>
some text
</td>
</tr>
</table>
<table>
<tr>
<td>
some text
</td>
</tr>
</table>
Basically, if I have a td with a given height, I can use vertical-align: middle to center things in the td. However, when there is another element inside the td that is floated (right in my case) then the vertical-align is not respected and the text sits at the top of the td. Any ideas how to style this so you can have a td with vertical-align and floated elements?
Also, I found this post: stackoverflow.com/questions/2641615/table-cell-doesnt-obey-vertical-align-css-declaration-when-it-contains-a-floate however it's not a solution for me, since I will likely need to have floated elements. I've tried using positioning to mimic the same layout but it doesn't seem I can position a td cell so that I can use position: absolute inside it to position the "floated" element at right: 0.
Try adding an empty element to the td.
<span class="vertical_aligner"></span>
.vertical_aligner {
vertical-align: middle;
height: 100%;
display: inline-block;
}
Absolute positioning seems to do the job. You just need to make sure you put position:relative on the TD.
#floater {
background-color: red;
height: 35px;
width: 35px;
position:absolute;
top:0;
right:0
}
table {
width: 100%;
}
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
position:relative;
}
You can set the line-height on the table cell to match the cell's height to fix this.
jsFiddle example
table tr td {
border: 1px solid green;
vertical-align: middle;
height: 35px;
line-height:35px;
}
Note that this will only work in the text in the cell occupies one line.