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/
Related
this fixed-header table deforms column when resizing window horizontally. Is there way to stop that?
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
}
table th {
border-left: 1px solid blue;
}
table th,
table td {
padding: 5px;
text-align: left;
border-left:1px solid blue;
}
table th, table td {
width: 150px;
}
table thead tr {
display: block;
position: relative;
}
table tbody {
display: block;
overflow: auto;
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>id</th>
<th>pick_up_location</th>
<th>destination</th>
<th>instruction</th>
<th>created_at</th>
<th>status</th>
</tr>
</thead>
<tbody>
<tr>
<td>12322</td>
<td>Whanga Road</td>
<td>Crescent Street</td>
<td>Call when arrive</td>
<td>123442342331</td>
<td>comming</td>
</tr>
</tbody>
</table>
</body>
</html>
Keep in mind this fixed-header table. Mean when you have 100 rows. you can scroll the row but the header position is fixed. The display block attributes can not be removed.
UPDATE:
With Mark answer, the table looks fine but still deform at small screen. A screenshot of it
To don't have problems with resizing you have to work in height and width with %.
Like : width: 30%;
height: 40%;
Hope help you.
Do not apply an explicit width or height to tag. Instead, give it:
max-width:100%;
max-height:100%;
just modify the last two ccs declarations as follows:
table{
display: block;
position: relative;
}
table tbody {
position : relative;
overflow: auto;
width: 100%;
height: 300px;
}
Adding word-break: break-all; to all the cells makes your code work (almost, since all characters are not of the same width)
See https://jsfiddle.net/3wn1zzfn/
Your problem is that when it is not possible to fit all cells in a table, the width: 150px; is overridden, and widths are now based on length of the line.
The problem here is that you are applying display: block, you shouldn't use it on tables. Also remove px values on tables. use %, or remove it at all
Remove these lines of code:
table th,
table td {
/*width: 150px*/
}
table thead tr {
/*display: block;
position: relative;*/
}
table tbody {
/*display: block;*/
overflow: auto;
width: 100%;
height: 300px;
}
Here a codepen to show it:
http://codepen.io/sandrina-p/pen/qNYork?editors=1100
--EDIT--
before -1 please can you tell me what's wrong with my solution, to improve it?
I've been trying to make a button which is inside a td cell in IE9. It's working fine on chrome and firefox (although the latter involved bubbling up height:100% to the td, tr and table elements). Do you have any idea how can I solve this problem using only CSS?
Here's the HTML:
<table>
<tr>
<td>
<span class="stuff">stuff</span>
</td>
<td class="the-td">
<button class="problem-here">
<span>stuff</span>
<span>more stuff</span>
</button>
</td>
</tr>
<tr>
<td>stuff</td>
<td>stuff!</td>
</tr>
</table>
And the CSS:
table {
border-collapse: collapse;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
td, tr {
padding: 0;
margin: 0;
height: 100%;
}
tr {
border: 1px solid black;
}
.problem-here {
margin: 0;
padding: 0;
background: none;
border: none;
background: lightgreen;
width: 100%;
height: 100%;
}
.stuff {
line-height: 100px;
}
.the-td {
width: 70%
}
button span {
display: block;
}
And, finally, here's a fiddle with the problem: https://jsfiddle.net/vh3jodap/10/
Thanks in advance
EDIT: here's a pic of what's happening right now:
http://i.imgur.com/J3hbWTj.png?1
In IE, in order for an element to have height:100%;, all parent elements must have height:100%;.
Any parent missing the height:100%; will cause IE to ignore it all.
Warning There's a high probability your table will grow bigger entirely
Hope this helps!
I have table, where second column is 120px wide. And I want to first column have width 100% of what left (100%-120px), but on android I can't use CALC function. Source: http://caniuse.com/calc
HTML:
<table>
<tr>
<td class="one">data</td>
<td class="two">data</td>
<tr>
<table>
CSS:
.one { width: calc(100%-120px); }
.two { width: 120px; }
Question:
How to replace calc(100%-120px) so it will work on Android?
Note: ( I don't know width 100% )
Simply don't set a width on .one, or set it to auto, then set the parent table to 100%. This will cause the td with .one to fill the remaining space of the table.
FIDDLE
<table>
<tr>
<td class="one">data</td>
<td class="two">data</td>
<tr>
<table>
CSS
table {
width: 100%;
}
.one {
background-color: red;
}
.two {
background-color: orange;
width: 120px;
}
Try this:
CSS
.one { width: 100%; }
.two { min-width: 120px; }
Here's a jsFiddle
calc is now supported by the Android Browser
http://caniuse.com/#feat=calc
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.
This should be simple. I am trying to get a grey bar in a <td> of a table to expand to the full height of the rest of the <tr>. The problem is that the rows and cells are not fixed height.
I'm a believer in table-free layouts, so no need to convert me. I am stuck with a table in this case, so I need to work with it and treat it nicely.
Here's the HTML:
<table>
<tr><td>
<div class="bar"></div>
</td>
<td>
please<br/>
help<br/>
me<br/>
stack<br/>
overflow<br/>
</td>
</tr>
</table>
And the CSS:
td {
border: 1px solid black;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
}
Here's a fiddle: http://jsfiddle.net/DKQVG/4/
Try to add the following css style:
html, body
{
height: 100%;
}
AND
td, table
{
border: 1px solid black;
height: 100%;
}
Working version with just CSS changes: http://jsfiddle.net/wLtCd/1/
Basically, your TD should have a height defined, so a percentage height makes sense for its child nodes.
Secondly, your div needs to have a display property of 'table'
Full CSS:
td {
width: 100px;
border: 1px solid black;
height: 100%;
}
.bar {
background: #eee;
width: 10px;
height: 100%;
min-height: 100%;
display: table;
}
You can remove the width part from above.
Is this what you want?: http://jsfiddle.net/ymu4y/2/
I added the class bar to the <td> instead of the <div>.
I'm not sure if you can accomplish that using just CSS, but I'm not that familiar with CSS so I would just use JQuery instead, always works best for me when I have dynamic sizings.
<script type="text/javascript">
$(document).ready(function () {
$(".bar").height($(".bar").parent().height());
});
</script>
I tested this and it works fine, but if you're looking for a CSS only solution I don't know anymore. Hope that helps!