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
Related
I need to change an html <table> in order to make it responsive,
But I want to work only with css
table{
width:100px;
height:100px;
background:green;
}
.a{
width:100% !important;
background-color:Red;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
What I want :
Without changing HTML, I want to have the AAA for the 100% width of the screen, and "BBB" + "CCC" below (under the AAA line with BBB : 50% width, and the "CCC" too in width)
I'm trying with no success, any help please ?
Are you against changing the default display: table; of the table ?
If no, you can do like this
.a{
width:100%;
background-color:Red;
}
.b, .c { width: 49%; display: inline-block }
table, tbody, tr, td { display: block; }
Fiddle
You can use float but that sort of negates the point of using a table in the first place.
If this isn't tabular data (and the layout suggests it's not) then you really should be looking for an alternative HTML structure.
* {
box-sizing: border-box;
}
table {
table-layout: fixed;
width: 100%;
}
td {
width: 110px;
float: left;
width: 50%;
border: 1px solid grey;
}
td.a {
width: 100%;
}
<table>
<tbody>
<tr>
<td class="a">AAA</td>
<td class="b">BBB</td>
<td class="c">CCC</td>
</tr>
</tbody>
</table>
I’ve tried to create a layout with a topbar and under it a split layout. The problem I had is that the width and height should automatically fit to the browser size.
So I tried it with a table:
body {
margin: 0;
padding: 0;
min-height: 500px;
min-width: 600px;
}
table {
border-collapse: collapse;
}
.topbar {
height: 50px;
position: relative;
background: grey;
}
.layout_table {
height: 100%;
width: 100%;
}
<body>
<table class="layout_table">
<tr>
<td class="topbar">
hallo
</td>
</tr>
<tr>
<table width="100%">
<td width="20%" style="background: blue;">
</td>
<td width="80%" style="background: yellow;">
</td>
</table>
</tr>
</table>
</body>
JSFiddle
Now the result is mostly correct. The problem is that the second row of the first table doesn’t have a full height.
How can I fix this?
Instead of using <table> elements for layout, which is not recommended as the element should only be used for tabulated content, you should try using modern alternatives. What you are trying to do can be achieved with a combination of calc() and float or flex specifications. The float property is better supported by older browsers, but flex (from the CSS3 Flexbox specification) offers more layout possibilities.
In my example below I have used the flexbox specification for both (1) vertically aligning your topcontent text and (2) for distributing space between the blue and yellow columns under it. The latter of which can be easily achieved by float, but the reason of avoiding it is because of the need to clear floats properly.
body {
margin: 0;
padding: 0;
min-height: 500px;
min-width: 600px;
}
.topbar {
display: flex;
align-items: center;
height: 50px;
background-color: grey;
}
.content {
display: flex;
height: calc(100vh - 50px);
min-height: 450px; /* minimum parent height minus topbar height */
}
.content .c1 {
width: 20%;
height: 100%;
background-color: blue;
}
.content .c2 {
width: 80%;
height: 100%;
background-color: yellow;
}
<div class="topbar">
<span>Hello</span>
</div>
<div class="content">
<div class="c1"></div>
<div class="c2"></div>
</div>
I know my question is related to this one, but my situation is slightly different and also there is no solution in the other question.
So, I have the following markup:
<table>
<tr>
<td>
<div>I respect max-width</div>
</td>
<td>
<input value="I do not" />
</td>
</tr>
</table>
With the following styles:
table {
width: 200px;
background: #f7f7f7;
}
td {
width: 50%;
background: #e7e7e7;
}
div, input {
display: block;
width: auto;
max-width: 100%;
background: red;
}
This would be the expected result:
But, this is the actual one:
Somehow the auto width of the input field determined by the browser is larger than 50% (100px). That's all fine and dandy, but why isn't it respecting the max-width: 100%?
If I force set width: 100% it works as expected (second image), however that's not what I want. I want it to be as wide as the browser decides is good, just not wider than 100%.
Any ideas?
Here's the fiddle.
That could help you: Fiddle
td {
box-sizing: border-box;
display: inline-block;
width: 50%;
background: #e7e7e7;
}
If you set the table to table-layout: fixed you get the result you want:
table {
width: 200px;
background: #f7f7f7;
table-layout: fixed;
}
input {
display: block;
max-width: 100%;
background: red;
box-sizing: border-box;
}
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 would like to have a table which in the columns can stretch but I'm having a little trouble with min and max width in css.
It also seems that theres some conflicting answers around how this works:
min/max width should work: Prevent text from overlap table td width
min/max width are unsupported: Min-width and max-height for table attributes
I would like to have the following
table{
width:100%;
}
.a, .b, .c
{
background-color: red;
}
.a
{
min-width: 10px;
max-width: 20px;
}
.b
{
min-width: 40px;
max-width: 45px;
}
.c
{
}
<table>
<tr>
<td class="a">A</td>
<td class="b">B</td>
<td class="c">C</td>
</tr>
</table>
Is there a way of achieving this without javascript (ie constrained stretching of columns with a table)?
I only need this to work with CSS3 + HTML5
a jsfiddle with stuff not expanding: http://jsfiddle.net/4b3RZ/10/
if I set only min-width on the columns i get a proportional stretch:http://jsfiddle.net/4b3RZ/8/
below is a table of what actually gets rendered for some different css setups:
Tables work differently; sometimes counter-intuitively.
The solution is to use width on the table cells instead of max-width.
Although it may sound like in that case the cells won't shrink below the given width, they will actually.
with no restrictions on c, if you give the table a width of 70px, the widths of a, b and c will come out as 16, 42 and 12 pixels, respectively.
With a table width of 400 pixels, they behave like you say you expect in your grid above.
Only when you try to give the table too small a size (smaller than a.min+b.min+the content of C) will it fail: then the table itself will be wider than specified.
I made a snippet based on your fiddle, in which I removed all the borders and paddings and border-spacing, so you can measure the widths more accurately.
table {
width: 70px;
}
table, tbody, tr, td {
margin: 0;
padding: 0;
border: 0;
border-spacing: 0;
}
.a, .c {
background-color: red;
}
.b {
background-color: #F77;
}
.a {
min-width: 10px;
width: 20px;
max-width: 20px;
}
.b {
min-width: 40px;
width: 45px;
max-width: 45px;
}
.c {}
<table>
<tr>
<td class="a">A</td>
<td class="b">B</td>
<td class="c">C</td>
</tr>
</table>