I would like ta have a table with a minimum height (ex: 100px) so when there is no data in this table I still have a minimal height. I also would like to have rows in this table to be aligned on top so that when I have only 1 element in this table this element should not be aligned middle but top.
Here is my result in this jsFiddle so far: http://jsfiddle.net/ttrMe
The problem is that my items are aligned middle.
Thanks for your help.
The other answers have provided vertical-align: top as the answer, which does answer the specific question. However, I think your approach to the border is flawed.
.tablewrapper {
border:1px solid #ccc;
width: 70%;
min-height: 100px;
margin: 0 0 5px;
}
.mytable {
width: 100%;
}
.mytable th {
background-color: #ccc;
height: 20px;
}
.mytable td {
vertical-align: top;
}
http://jsfiddle.net/ttrMe/16/
Note, I changed the border to be on the #tablewrapper div element which wraps the .mytable. Also note, I changed the ids to classes so I could have more than one and demonstrate the difference. Additionally, the min-height does not work alone with the table element, but does with the div.
EDIT
jsFiddle applies a CSS reset (Normalize CSS checkbox on the left), so you might not see the exact same look in your page unless you also reset. In that case, you'll probably want:
.mytable {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
http://jsfiddle.net/ttrMe/17/
Are you talking about the vertical alignment of the row text?
#mytable tr td {
vertical-align: top;
}
I added this to your jsfiddle, see if that's what you want.
Related
I have a simple, single page with a single, fixed-width content column (fixed width on body), that, among other things, contains figures as blocks.
Figures always contain exactly one image, an optional caption, and are styled with a border and a background. It is preferable that images retain their original size, but should be scaled down if the border-box width of the figure would not fit into the column. Captions, if present, should be contained within the figure (i.e. on its background and within its borders), and should be broken to multiple lines if it would cause the figure to grow in width.
I have come across basically two ways of achieving this, but I cannot really get either to work.
The first one is setting display: table on the figure and display: table-caption on the caption, but this seems to cause the browser to take it completely out of the figure, not leave it inside.
The second is setting width: min-content; max-width: 100% on the figure. This works properly if the figure is naturally smaller than the column width, but I could not manage to have it shrink the image. While the figure element itself is correctly width-limited, the image in it simply overflows. (width: fit-content also takes the caption's width into consideration.) object-fit: scale-down on the image gets completely ignored. If I set width: 100% and/or max-width: 100%, it gets arbitrarily scaled down to match the minimum width of the caption, if present, or 0 if there's no caption. Only thing that truly works is if I specify the image's exact width, but then it loses responsiveness.
I have looked all over the web for a solution, including SO, but not found a proper solution. Here's a simplified HTML/CSS to illustrate what I'm talking about.
<body>
<figure>
<img src="some-image.png" />
<figcaption>Lorem ipsum dolor sit amet, this might be narrower/wider than the image above or completely omitted.</figcaption>
</figure>
</body>
And the CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
border: 1px solid red;
width: 300px;
}
figure {
background: gray;
display: block;
border: 1px solid blue;
width: min-content;
max-width: 100%;
}
figure img {
border: 1px solid green;
object-fit: scale-down; /* Doesn't seem to do anything */
width: 100%; /* This causes the image to shrink to the caption, or 0 if there is no caption */
max-width: 100%; /* Same as above */
}
I think I kind of understand why this is happening, I have no idea how to solve it. Any help would be appreciated. If JavaScript is absolutely necessary, please do not use any other frameworks than JQuery.
Here are two screenshots demonstrating both a correctly working and an overflowing case:
Your first approach might work. It puts the caption out of the figure box, but it does take on the figure width. So adding a background and border to your figcaption might do the trick. And leaving out the border bottom in the figure and the border top in the caption make it look like one box.
figure, figcaption
{
border: 1px solid blue;
background: gray;
}
figure
{
display: table;
border-bottom-width: 0;
}
figcaption
{
display: table-caption;
caption-side: bottom;
border-top-width: 0;
}
figure img
{
border: 1px solid green;
max-width: 100%;
}
See https://jsfiddle.net/xdv02n8e/11/
Im using GWT. I need to make two columns fixed, to freeze them, and the others should scroll fluently.
Here is simple layout before freezing two first columns (where numbers are indicated and Z column)
After freezing:
As you can see, if freezes correctly I can scroll and two first columns dont move. HOWEVER, A column content goes before Z column and disappears. (I moved Z column to show how A column content hides purple color)
My css:
//for number column
tr.Row td.row1 {
border-color: #ffffff;
position : fixed;
height : 119px;
left : 344px;
overflow-y: auto;
}
// for Z COLUMN
.lockHead{
position: fixed;
z-index:1!important;
}
Maybe a solution is to use padding-left or smt? Please help Im totaly stuck on it.
You can give the GWT table a class like class="fixed_header" and style the rest via CSS. Your CSS approach seem a little bit complicated I think.
Can you check if this is what you want to achive? A fixed header. CSS:
.fixed_header {
table-layout: fixed;
border-collapse: collapse;
}
.fixed_header td:nth-child(1), th:nth-child(1){
min-width: 100px;
}
.fixed_header thead tr {
display: block;
position: relative;
}
.fixed_header tbody {
height: 60px;
display: block;
overflow: auto;
}
https://jsfiddle.net/ghsroh81/
I have a table that extends off the edge of the screen, but the body only gets as wide as the screen, causing the table to overflow it.
Demo: http://jsfiddle.net/6REkj/
<html>
<head>
<style>
table { background-color: lime; }
body { border: 2px solid blue; }
</style>
</head>
<body>
<table>
<tr><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td><td>test</td></tr>
</table>
</body>
</html>
This is one of those things that make me think CSS is broken. I thought containing elements were supposed to expand to fit their contents.
Question 1: Why is it doing that?
Question 2: What should I do to get a margin between the table and the right edge of the page?
if you set display:table; to body or html, it will allow to grow its width over the 100% of viewport. it will just expand like a table does :)
html {display:table;width:100%; /* need to set a width to 100%, wich means here a min-width since it is displayed with the same specifities thas has a table , it shrinks and expand according to its content */}
http://jsfiddle.net/6REkj/1/
other options :
display:inline-block;min-width:100%; on body : http://jsfiddle.net/6REkj/3/
position:absolute;min-width:100%; on html : http://jsfiddle.net/6REkj/4/
Edit nowdays, min-width:max-content would do . http://jsfiddle.net/bj4wk6m2/
It's very strange that the simplest solution hasn't been mentioned:
body {
width: fit-content;
min-width: 100%; /* because the content might only be a few words */
box-sizing: border-box; /* because 100% + padding > 100% */
}
Unfortunately that doesn't work everywhere and it still requires prefixing. In Chrome (with Blink these days) that would be: -webkit-fit-content (-webkit- in Blink, weird).
CSS isn't broken, the behaviour you are seeing is by design.
Some quotes from the link above:
The following constraints must hold among the used values of the other properties:
'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = width of containing block
..
If 'width' is set to 'auto', any other 'auto' values become '0' and 'width' follows from the resulting equality.
From this I understand that block level elements have a default width of 100% of their containing block if all of the other properties are not set.
<body> is by default a block level element.
You could set float: left; or display: inline-block on body and it will grow with its content.
Here's a jsFiddle.
To answer question 2 (to get the result of the accepted answer without resorting to setting display: table on an element which isn't a table), you could do it this way:
CSS:
html {
padding: 10px;
}
html, body {
margin: 0px;
}
body {
border: 2px solid blue;
display: inline-block;
min-width: 100%;
box-sizing: border-box;
}
table, p {
background-color: cyan;
}
Here's a jsFiddle.
The only solution for this is to have a vertical scrollbar.
It can be achieved with an additional div, wrapping the table.
This would be the css:
body { border: 2px solid blue; }
table, p { background-color: cyan; width: 100%; word-wrap:break-word;}
div { width: 100%; overflow-x: auto;}
If you would only have the p-Tag, the attribute word-wrap:break-word; helps.
You can also move the paragraph outside the div, which allows you to see the whole content without scrolling.
See the fiddle for a working sulution:
http://jsfiddle.net/WrbpJ/
If you prefer scrolling the whole page, and not only the div, this can be used:
body { border: 2px solid blue; display: table;}
See http://jsfiddle.net/sGH4t/
If you don't want the scrollbar at all, you'll have to use lists or divs instead of a table.
The way you have used tr and td tags, the data in table is bound to overflow.
You have to decide how many rows and colmuns your table should have, when you are using simple html table. just put tr and td tags accordingly, and then you are done.http://jsfiddle.net/6REkj/Fiddle
I'm trying to build the liquid layout shown below in CSS.
The left column should stretch to all available space, and if it's possible, on same line.The column on right should became with the same width.
I have already achieved a result very close to what I want. Take a look at http://jsfiddle.net/tcWCC/34/embedded/result/
But there are two problems. The height of both aligned DIVs should be equal. The first or second DIV should grow to be the same height as the other.
The second question is that when the width is not sufficient for 2 DIVs, I want the first (NomeEvento) div to be on top. and not the second div (DataEvento).
I am not sure I understood your question correctly. Is the following layout something similar to what you want? http://jsfiddle.net/5sjgf/
Here's more CSS to try out. If you wanted a margin on that left side. I added background colors to help differentiate.
div.NomeEvento {
text-align: left;
float: left;
width: 75%;
background-color: #eee;
}
div.DataEvento {
text-align: left;
margin-left: 5%;
width: 20%;
float:left;
background-color: #ccc;
}
It seems like a lot of extraneous CSS to me. But maybe the other stuff is in there for a reason. This works fine as the sum-total of your CSS though:
div.Evento {
overflow: hidden;
margin-top: 10px;
}
div.NomeEvento {
background: #eee;
padding-right: 20%; /* the same as the right column width */
}
div.DataEvento {
float:right;
background: #ddd;
}
...BUT, if you're right-floating an element, place it first in the layout - here it's element class DataEvento:
<div class="Evento">
<div class="DataEvento">#evento.Data</div>
<div class="NomeEvento">#evento.Nome</div>
</div>
Check it: http://jsfiddle.net/J89Hp/
Cheers
I acomplished what I want using display table, table row and table cell in my divs.
Take a look. It's exactily what I want.
http://jsfiddle.net/tcWCC/47/embedded/result/
I've found a lot of similar questions, and tried out several solutions (including some of the so-called "holy grail" CSS layouts), but they don't quite do what I need.
I have a containing div (a CSS containing block) with id right. Inside it on the left side, I want a fixed-width div (a splitter bar, but it doesn't matter what it's being used for; id splitpane); on the right, filling the rest of the space, another div (id right-box below).
I've tried making the two inner divs display: inline-block (with vertical-align: top), setting the left one to width: 3px, but then there's no way to set the right to have width 100% - 3px. I've also tried using the float: left/margin-left: -100%/margin-left: 3px trick, but it has the same problem: the 100% plus the 3px overflows the parent containing block and causes a scroll bar to pop up. (Of course, it's not the scroll bar per se that's the problem; I could use overflow: hidden to remove it, but then content on the right would be truncated.)
Currently I'm using width: 99.5% for the right div, but that's a terrible hack (and is subject to overflow depending on screen width). It looks a bit like this:
<div id="right"><div id="splitpane"></div><div id="right-box">
...
</div></div>
With CSS as follows (float version, but the inline-block version is similar):
#right {
display: inline-block;
vertical-align: top;
height: 100%;
width: 85%; /* this is part of a larger div */
}
#right-box {
width: 99.5%; /* stupid hack; actually want 100% - 3px for splitter */
height: 100%;
}
#splitpane {
float: left;
width: 3px;
height: 100%;
background: white;
border-left: solid gray 1px;
border-right: solid gray 1px;
cursor: e-resize;
}
Is it even possible to do this? This is for an internal app., so solutions only need to work in Firefox 3 (if they are specific to FF3, though, preferably it's because the solution is standards-compliant but other browsers aren't, not because it's using Firefox-only code).
DIVs are the wrong element type for this since they don't "talk" to each other. You can achieve this easily with a table:
<table style="width:200px">
<tr>
<td id="splitpane" style="width: 3px">...</td>
<td id="rightBox" style="width: 100%">...</td>
<tr>
</table>
The 100% will make the rightBox as wide as possible but within the limits of the table.
This is possible. Because block level elements automatically expand to take up any remaining horizontal space, you can utilise a block level element next to an uncleared floated element with your desired width.
<style type="text/css">
div {
height: 100px;
}
#container {
width: 100%;
}
#left {
background: #FF0;
}
#splitpane {
position: relative;
float: right;
background: #000;
width: 3px;
}
</style>
<div id="container">
<div id="splitpane"></div>
<div id="left"></div>
</div>
See http://jsfiddle.net/georeith/W4YMD/1/
why you didn't use margin-left (since it was float layout) on right box?
so no need to create a splitter div...
#right{
width:200px; /*specify some width*/
}
#rightbox{
float:left;
margin-left: 3px; /*replace the splitter*/
/*margin: 0 3px; /*use this to give left & right splitter*/ */
}
yeah something like that, i hate empty div, it's not semantic and it's like putting a splitter on the "old" table way
If the div #right-box is only going to contain non-floated content it might be an idea to just put the content inside #right instead and let it wrap around the floated #splitpane.