I have text and picture in table:
<table>
<tr><td>Jon Kowalsky</td>
<td rowspan="4"><img src="forrest.jpg" height="150px"/></td></tr>
<tr><td>Eagle Rock Ave</td></tr>
<tr><td>New York</td></tr>
<tr><td>ja#jankowalski</td></tr>
</table>
as you can see picture is in all four rows but it makes large spaces between text [picture below].
Can I keep text and image in table and make spaces between text smaller?
Since you have a fixed height for the image, the table row height does not change much. Either reduce the height of the image or increase rowspan of the table cell of the image and set the line-height of td to a lower value or 0.
<table>
<tr><td>Jon Kowalsky</td>
<td rowspan="6"><img src="forrest.jpg" height="150px"/></td></tr>
<tr><td>Eagle Rock Ave</td></tr>
<tr><td>New York</td></tr>
<tr><td>ja#jankowalski</td></tr>
<tr></tr>
<tr></tr>
</table>
And the css
td{
line-height: 0;
}
What is happening is that the text in the cells to the left will span the entire height of the cell with the picture occupying the specified amount of rows.
A possible solution is to use other html elements with a bit of CSS.
For example:
<div class="details">
<p>Jon Kowalsky</p>
<p>Eagle Rock Ave</p>
<p>New York</p>
<p>ja#jankowalski</p>
</div>
<img src="forrest.jpg" height="150px"/></td>
<style>
.details {
float: left;
}
.details p:first-child {
margin-top: 20px;
}
.details p {
margin: 0;
}
</style>
Related
I have markup looking something like this:
<html>
<head>
<style>
table.t_group {
border: 2px solid black;
margin: 0 auto 0 auto;
}
table.t_group > tbody > tr > td {
vertical-align: top;
}
</style>
</head>
<body>
<table class="t_group" style="width:500px">
<tbody>
<tr>
<td>
<img height="24" widht="24"/> First cell
</td>
<td>
Last cell
</td>
</tr>
</tbody>
</table>
</body>
</html>
The key problem is vertical alignment of text in cells with an image. For whatever reason, it is aligned to bottom, but I expect it to be aligned to top.
Why does it happen this way? How to align text in cells with images to top?
You image is not aligned properly using vertical-align therefore the text next to it is at the baseline of your image
Use:
table img{
vertical-align:top;
}
jsBin playground
https://developer.mozilla.org/en/docs/Web/CSS/vertical-align
You’ll need to align the images as well – right now, image and text are sitting on one “line”, and with the image aligned to the baseline by default, this is the effect you’ll get.
img { vertical-align: top; }
This will fix it.
I have a table with a known width, 776 pixels, and three columns. The third column has a known width, 216 pixels, but the other two do not have known widths. The behavior I want is for the second column to have the same width as its child element. Whatever width is left over, 776 - 216 - 2nd, would be the width for the first column.
I found an example that sets the width of the column that should have its width minimized to 1 pixel. This does seem to work, but it seems like it is a hack and I don't understand why it works. Is there a more "standard" way to achieve the same result?
Here is my HTML with inline CSS as an example:
<table style="width:776px; height:48px;">
<tr>
<td style="height:48px;">
<!-- Note: Setting font size to zero prevents white space from contributing to an inline block element's width -->
<div style="background:#f0f0f0; border:solid 2px #808080; font-size:0; margin-left:8px; text-align:center;">
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Art</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Events</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Papers</h3>
<h3 style="display:inline-block; font-size:20px; line-height:28px; padding:8px;">Research</h3>
</div>
</td>
<!-- Note: Setting width to one pixel removes horizontal spacing -->
<td style="vertical-align:middle; width:1px; height:48px;">
<h3 style="margin-left:8px;"><label for="search">Search:</label></h3>
</td>
<td style="vertical-align:middle; width:216px; height:48px;">
<input id="search" style="margin-left:8px; width:208px;" type="text" value="" maxlength="32">
</td>
</tr>
</table>
Well, an easy way would be to set the 1st cell to width: 100%. That would force it to fill as much as it can the parent table's width. Then, to the third cell, you put a 216px content element (like a div).
The table's cell always try to respect its content. So this way, the 2nd div would be squized in the middle, just respecting its own content. The 3rd one would respect its 216px content, and the 1st would fill up the rest.
Working JsFiddleExample
<table>
<tr>
<td>1stContent</td> <!-- Fills what it can -->
<td>2ndContent</td> <!-- Squized in the middle -->
<td>
<!-- Will respect the width of its content -->
<div class="dv3rd">
216px
</div>
</td>
</tr>
</table>
CSS:
table {
width: 776px;
background: silver;
}
td:nth-child(1) {
width: 100%;
background: red;
}
td:nth-child(2) {
background: green;
}
td:nth-child(3) {
background: blue;
}
.dv3rd {
width: 216px;
}
However
As well commented, you should not be using tables for the page layout. A simple replacement would be working with css tables, where your divs can act like display: table and display: table-cell elements.
Here's the same example, but using div's instead:
Working JsFiddleExample - Tableless
<div class="table">
<div>
1stContent
</div>
<div>
2ndContent
</div>
<div>
<div class="dv3rd">
216px
</div>
</div>
</div>
CSS:
.table {
width: 776px;
background: silver;
display: table;
}
.table > div:nth-child(1) {
display: table-cell;
width: 100%;
background: red;
}
.table > div:nth-child(2) {
display: table-cell;
background: green;
}
.table > div:nth-child(3) {
display: table-cell;
background: blue;
}
.dv3rd {
width: 216px;
}
I found the reason why this work's in BoltClocks link (in the comments): http://www.w3.org/TR/CSS21/tables.html#auto-table-layout
...This algorithm may be inefficient since it requires the user agent
to have access to all the content in the table before determining the
final layout and may demand more than one pass.
Column widths are determined as follows:
Calculate the minimum content width (MCW) of each cell: the formatted content may span any number of lines but may not overflow the cell box. If the specified 'width' (W) of the cell is greater than MCW, W is the minimum cell width. A value of 'auto' means that MCW is the minimum cell width...
Answer:
Calculate the minimum content width (MCW) of each cell: the formatted content ... may not overflow the cell box.
I like tables since text align is pretty nice there. If we have a text inside a <td> like <td>Sample Text</td>, it doesn't matter how much height the cell have, the text will be vertically aligned on center. The text will be automatically re aligned if there is less space in the cell for the text to accommodate.
But, if I have a span inside the td, having the same height of td, the text will be aligned on top. I can give a fixed padding inside span for the text to align vertically, but then at the time of resizing, it won't pull the text upward inside the cell, leaving a permanent top padding.
What I want is to make the text behave inside a span (which is inside a td), to behave exactly as it is inside a td. Below image describes what I am trying to say;
Here is a demo fiddle, I just want to display text inside span to display exactly as it behaves inside the td.
HTML:
<table cellpadding="0" cellspacing="0">
<tr>
<td>Sample Text</td>
</tr>
<tr>
<td>Sample Text rearranged</td>
</tr>
<tr>
<td><span>Sample Text</span></td>
</tr>
</table>
CSS:
td{
border: solid 1px #000;
height: 40px;
width: 100px;
}
span{
height: 40px;
display: block;
background: orange;
}
One easy approach is setting a line-height. But this won't work, if you have fluid heights and/or multiple lines of text.
span {
line-height: 40px;
}
Another way inside the td would be vertical-align: middle; along with removing display: block;. You can set the background color on the td.
td {
background-color: orange;
}
span {
vertical-align: middle;
}
You have set display:block to your span that's why it is not vertically centered. Set background for TD instead of SPAN.
You can set this style:
div, span{
width:100%;
text-align:center;
padding-top:5px;
}
set display:table to the parent tag and display:table-cell and vertical-align:middle to the span like this:
DEMO
this works for all elements not just td
HTML
<div>
<span>
some text
</span>
</div>
CSS
div{
width:100px;
height:100px;
background:gold;
display:table;
}
span{
display:table-cell;
vertical-align:middle;
}
I dont really know the wright way, but you can put padding-top. Or use what you said is working. but if you include
line-height:100px; /* the same as your div height */
will work. But if it is just one line. Otherwise you have to include padding, or I think so.
Okay first I must tell you the difference between a div and a span.
A div is a block element ( which takes the full width of browser )
while a span is an inline element ( which takes the width of the content )
So when you put a span inside a td, It is not actually taking the full width . So , either you can convert it to div or make the span as display: block;
Now since the width is adjusted now, we must also adjust the height. Since span understands the height of the span as the height of the content, so we give a line height of 40px. i.e. line-height: 40px; which is the height of the td.
As a summary .. display block is to take the full width and line height is for making the height as much as we want. In our case we made it equal to the td height.
Hope this helps !
span {
background: orange;
line-height: 40px;
display:block;}
http://jsfiddle.net/f45Sv/8/
Conclusion: use JavaScript to calculate max-width of first cell.
Example:
<table>
<tr>
<td style="white-space:nowrap; overflow: hidden">Some text. It maybe very long and should be shortened if there is no more available width in table</td>
<td>This shall always be visible and should not have any space between this and the previous cell, but if the two cells are thinner than the table I want my white-spaces after the end of this cell</td>
</tr>
</table>
What I don't know is the width of cell2 or the width of the table
What I want to achieve is to have a max-width on the first cell, based on available space without using JavaScript. Not sure if it even is possible.
Example where the text is short:
|Some short text|Her comes a new text |
Example where the text is too long:
|This is some text which might s|Her comes a new text|
Its a little hard to determine exactly what you want- perhaps something like this?
HTML
<div>
<span>Something quite long that should exceed the table cell.</span>
<span>here is some moreSomething quite long that should exceed the table cell.Something quite long that should exceed the table cell.</span>
</div>
CSS
div{
margin:0;
padding:0;
display:table;
table-layout: fixed;
width:100%;
max-width:100%;
}
span{
padding 0 20;
margin:0;
display:table-cell;
border:1px solid grey;
}
span:first-child{
white-space: nowrap;
overflow:hidden;
text-overflow: ellipsis;
}
span:last-child{
width:auto;
}
You can use the selector :first-child to select the first <td> inside a table:
table td:first-child {
width: 100%;
}
Is this what you want?
All I did was add a max-width to the cell that you want a max width on.
td:first-child {
max-width: 100px;
overflow: hidden;
white-space: nowrap;
}
Simplest solution without JavaScript is:
<table>
<tr>
<td style="width:80%;">Some text. It maybe very long and should be shortened if there is no more available width in table</td>
<td>This shall always be visible and should not have any space between this and the previous cell, but if the two cells are thinner than the table I want my white-spaces after the end of this cell</td>
</tr>
</table>
Apologies, if I do not understand what exactly you want!
I have an html table of width 222px
Inside in I have a single row with width defined as 160px.
Inside this row, there is a single column having same width as that
of the row.
My question is, how to align this row to the center of the table.
I have tried align="center"and style="float:center;" but these work only
on the contained text.
But if you really, really must use a table, here's how to style it:
.resultset {
width:222px; border:1px solid;
border-collapse:separate; border-spacing:30px 2px;
}
.resultset td {
border:1px solid;
}
Where the 30px in the border-spacing is half the horizontal difference between the table width and the cell width.
See jsFiddle.
Agree with Quentin. There is no point having a 1x1 table.
Try with the following.
<div style="margin: 0px auto; position: relative; width: 222px;">
....your content
</div>
You might want to create a CSS class for the div. I personally don't like having inline styles.
you can try this like that
<table width="222px" align="center">
<td width="31px"></td>
<td width="160px">test</td>
<td width="31px"></td>
</table>
test here : http://www.webmasterorbit.com/wysiwyg-html-tester.html
You must use this
<td align = 'center'>Blah blah</td>
using this wont work
<tr align = 'center'></tr>