I have a table with two tds to each row. I've come to notice that if I wanted to line break the text the text inside the opposite td does not vertically align to it. The td with the line break goes to the top of the cell where the other stays vertically aligned to the center. What would be the most effective solution in keeping both center and having their baselines equally aligned?
http://jsfiddle.net/653K2/2/
HTML
<table>
<tbody>
<tr>
<td>Category One</td>
<td>Data</td>
</tr>
<tr>
<td>Category Two</td>
<td>Data<br>More Data</td>
</tr>
</tbody>
</table>
CSS
table {
width: 100%;
}
table tr td:first-child {
color: #777;
width: 40%;
}
tr {
height: 40px;
border-bottom: 1px dotted #e6e6e6;
}
There is a vertical-align property on css, is this what you want?
td { text-align:left; vertical-align:top; padding:0}
http://jsfiddle.net/653K2/3/
Perhaps what you want is to add to your css
td {vertical-align: baseline}
replace baseline with one of [baseline, top, center, bottom]
td {padding: 10px 0; vertical-align: top;}
http://jsfiddle.net/653K2/4/
Related
I am trying to get a horizontal line to stretch between the first and last columns in a table but I need the first and last columns to wrap if the text is long. The only way I have found to get the desired effect is to use width:100%; on the middle column, and white-space:nowrap; on the first and last, but I need to find another way as I need the text to wrap when there isn't enough space. Is there a way to achieve this effect in plain CSS?
https://jsfiddle.net/macu/8axk5qv5/4/
table {
width: 100%;
}
td {
vertical-align: middle;
white-space: nowrap;
}
td:nth-child(2) {
width: 100%;
}
.line {
border-top: thin solid blue;
}
<table>
<tr>
<td>Title cell with a long title that should wrap</td>
<td><div class="line"></div></td>
<td>Another cell, should wrap</td>
</tr>
</table>
If the text is long enough there should be no line, and the text should wrap normally:
You can put a span or div in each cell, and make them to use white background, then set the line on the table row to create such layout visually.
Check out the fiddle demos below, so you can easily resize and see the wrapping text.
jsFiddle
.table {
width: 100%;
border-collapse: collapse;
}
.table tr {
background: linear-gradient(blue, blue) center/99.99% 1px no-repeat;
}
.table div {
background: white;
display: inline-block;
}
.middle div {
min-width: 100px; /*remove or adjust value as need*/
}
.last {
text-align: right;
}
<table class="table">
<tr>
<td class="first">
<div>Title cell with a long title that should wrap</div>
</td>
<td class="middle">
<div><!-- This td can be removed if no min-width needed --></div>
</td>
<td class="last">
<div>Another cell, should wrap</div>
</td>
</tr>
</table>
But using flexbox can make it much easier, if you don't have to use table.
jsFiddle
.container {
display: flex;
}
.line {
background: linear-gradient(blue, blue) center/1px 1px repeat-x;
flex: 1;
min-width: 100px; /*remove or adjust value as need*/
}
<div class="container">
<div>Title cell with a long title that should wrap</div>
<div class="line"></div>
<div>Another cell, should wrap</div>
</div>
try by removing the white-space: nowrap; on the TD tag, then target the first and the third TD with
td {
vertical-align: middle;
//white-space: nowrap;
}
td:nth-child(1),td:nth-child(3) {
//add whatever min-width AND max-width so it could be something like this
min-width:150px;
max-width:300px;
}
see if that helps.
Adding "display: inline-block" and "overflow: hidden" to elements seems to change their margin inside tables. It seems to be related to vertical-align, but why "overflow: hidden" even if only horizontal, makes a difference? Safari doesn't seem to be affected.
http://jsbin.com/ribezifoli/1/edit?html,css,output
table {
border-collapse: collapse;
margin: 10px;
}
td {
border: 1px solid black;
}
span {
background-color: red;
}
.one span {
display: inline-block;
/* overflow: hidden; */
}
.two span {
/* display: inline-block; */
overflow: hidden;
}
.three span {
display: inline-block;
overflow: hidden;
/* vertical-align: top; */
}
<table class="one">
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
</table>
<table class="two">
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
</table>
<table class="three">
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
<tr>
<td><span>hello</span></td>
<td><span>hello</span></td>
</tr>
</table>
From the very last paragraph of section 10 of CSS2:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
The baselines of the inline-blocks with overflow: hidden, therefore, are their bottom margin edges, and the extra padding you see is space that's reserved for typographic descenders beneath the baseline that the inline-blocks reside on. The text within these inline-blocks is on separate baselines, unrelated to their parent table cells.
Welcome to the wonderful world of vertical alignment.
Add vertical-align: top to .three span and it'll snap into place.
I need to be able to overwrite vertical align for an image inside a td tag that has a vertical align defined.
I tried giving the image vertical-align: middle, and while this works in ff, the image still drops below the line in chrome.
The html is provided though bbcode editor.
<table>
<tr>
<td style="vertical-align: top">
The text in table cell needs to align to top
<br/>
<br/>
image should vertically center relative to line <img src="https://jsfiddle.net/img/logo.png"/>
</td>
</tr>
td {
border: 1px solid blue;
height: 200px;
}
td img {
vertical-align: middle;
}
fiddle
works in firefox, but not in chrome.
Middle vertical align of td will fix your problem:
<td style="vertical-align: middle">
https://jsfiddle.net/6okr7ayy/7/
"vertical-align: top" cannot be changed or removed (its used by bbcode editors for various purposes)
Then try just to override it in CSS with !important
td {
vertical-align: middle !important;
}
wrap the text and the image inside the td into a paragraph. Now your code works on Chrome too:
<table>
<tr>
<td>
<p>The text in table cell needs to align to top
<br/>
<br/>image should vertically center relative to line
<img src="https://jsfiddle.net/img/logo.png"/></p>
</td>
</tr>
</table>
CSS stays at it was:
td {
border: 1px solid blue;
height: 200px;
}
td img {
vertical-align: middle;
}
See the fiddle.
Overwrite the standard the vertical-align property with !important within your CSS:
UPDATE
Add a element to your text and vertical-align your image
td img {
background: red;
height: 40px;
vertical-align: middle;
}
td {
border: 1px solid blue;
height: 200px;
}
td img{vertical-align:middle}
<table>
<tr>
<td style="vertical-align: top">
The text in table cell needs to align to top The text in table cell needs to align to top The text in table cell needs to align to top
<br/>
<br/>
<span>image should vertically center relative to line</span> <img src="https://jsfiddle.net/img/logo.png"/>
</td>
</tr>
</table>
Well, this worked as expected:
<td style="vertical-align: middle; text-align: center">some text</td>
(the text comes out vertically and horizontally centered), so being a nice guy I moved over the style part into a CSS like so:
HTML:
<td class="allcenter">some text</td>
CSS:
.allcenter {
vertical-align: middle;
text-align: center;
}
and you know what, it only gets horizontally centered.
What gives?
HTML
<table>
<tr>
<td class="allcenter">some text</td>
</tr>
</table>
CSS
td {
border:1px solid black;
padding : 10px;
height:100px;
width:100px;
}
.allcenter {
vertical-align: middle;
text-align: center;
}
Working Fiddle
Look at the image below
How do you center the image in the table collumn (<td>)? Padding don't space at the top only to the right and bottom
Here is the table html code
<table>
<tbody>
<tr>
<td class="bedButton ward-A">A115:1</td>
<td class="bedButton ward-A">A116:1</td>
</tr>
</tbody>
</table>
and here is the CSS:
.bedButton{
padding:25px;
width:250px;
height:300px;
background:url(../images/bedview/bed-background.png) no-repeat;
margin-left: auto;
margin-right: auto
}
To horizontally center the text, use:
td {
text-align:center;
}
jsFiddle example