I'm trying to vertically align text in two table columns, one of which also has a text input control. Basic code such as:
<td>Caption</td><td>Enter here <input type="text"></td>
No matter how I apply vertical-align to one or both columns, 'Caption' is not on the same level as 'Enter here'. Most times 'Caption' is higher. What's the solution?
Try:
td, input {
vertical-align: middle;
}
If that doesn't work, you will need to post more code to get a good answer.
If you mean that Caption and Enter here are not vertically aligned, despite using the suggested 'vertical-align: middle;' you may have to look into giving the columns a specific or minimum width. I am suspecting that the elements may not be perfectly positioned visually next to each other on the 'reading' level, due to the columns adjusting with top/bottom padding in order to maintain vertical alignment. Therefore being strict about the width of your columns may help.
However I agree with #willoller, if this on top of what the rest of the community suggested isn't working for you, then you need to post relevant code that will help us pinpoint an answer for you.
It should vertical align to middle by default assuming there isn't some other CSS being applied. ... your issue might be related to line height where text and inputs aren't the same .. ..try:
td{
line-height:40px;
height:40px;
}
Thanks for everyone's help so far. The line-height and height additions correct the vertical alignment of the two texts, but also significantly increase the inter-row spacing. This doesn't improve if I set the margin, padding and border to 0. I can't reduce the heights to less than 40px or the alignment fails again.
The following code demonstrates the problems. There's a demo page at www.quinze.co.uk/test/test.html.
<!DOCTYPE HTML>
<html>
<head>
<meta charset=utf-8>
<title>Table test</title>
<style type="text/css">
.s0 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
}
.s1 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
vertical-align: middle;
line-height: 40px;
height: 40px;
}
.s2 {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
vertical-align: middle;
line-height: 40px;
height: 40px;
padding: 0;
margin: 0;
border-width: 0;
}
</style>
</head>
<body>
<pre> font-family: Arial, Helvetica, sans-serif;
font-size: 13px;</pre>
Col1 captions have different vertical alignment to Col2 but inter-row spacing is good.
<table>
<tr>
<td class="s0">Col1</td>
<td class="s0">Col2<input type="text"></td>
</tr>
<tr>
<td class="s0">Col1</td>
<td class="s0">Col2<input type="checkbox" checked><input type="text" value="ABC"></td>
</tr>
<tr>
<td class="s0">Col1</td>
<td class="s0">Col2<input type="text"></td>
</tr>
</table>
<pre> font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
vertical-align: middle;
line-height: 40px;
height: 40px;
</pre>
The two column captions are now at the same height but the inter-row spacing has increased
<table>
<tr>
<td class="s1">Col1</td>
<td class="s1">Col2<input type="text"></td>
</tr>
<tr>
<td class="s1">Col1</td>
<td class="s1">Col2<input type="checkbox" checked><input type="text" value="ABC"></td>
</tr>
<tr>
<td class="s1">Col1</td>
<td class="s1">Col2<input type="text"></td>
</tr>
</table>
<pre> font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
vertical-align: middle;
line-height: 40px;
height: 40px;
padding: 0;
margin: 0;
border-width: 0;
</pre>
Padding, margins and border reduced to 0 but still greater inter-row spacing
<table>
<tr>
<td class="s2">Col1</td>
<td class="s2">Col2<input type="text"></td>
</tr>
<tr>
<td class="s2">Col1</td>
<td class="s2">Col2<input type="checkbox" checked><input type="text" value="ABC"></td>
</tr>
<tr>
<td class="s2">Col1</td>
<td class="s2">Col2<input type="text"></td>
</tr>
</table>
</body>
</html>
Related
I am trying to display some text in the bottom left of my table but having some issues getting that. What can I try to get that to display?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
.heading2_b10 {
font-family: calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10">Text</td>
</tr>
<tr>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
I think the simplest thing to do would be just to add style="text-align:left;" to the html tag's attribute
Can colspan attribute help you in this case?
.table_b10 {
width: 10cm;
height: 2cm;
border: 1px solid;
margin-left: auto;
margin-right: auto;
}
heading2_b09 {
font-family:calibri;
font-weight: bold;
font-size: 8;
text-align: center;
}
.heading2_b10 {
font-family:calibri;
font-weight: bold;
font-size: 11;
text-align: center;
}
<table class="table_b10">
<tbody>
<tr>
<td class="heading2_b10" colspan="2">Text</td>
</tr>
<tr>
<td class="heading2_b09">LOG-ID: ###</td>
<td class="heading2_b10">LADIES STOCKINGS SYN-BLACK</td>
</tr>
</tbody>
</table>
Explanation: colspan attribute can be applied on a <td> element, it allows you to set how columns wide the element should be.
What is changed?
The first row has colspan="2", that means his width will be extended to 2 columns, like the one under. But this one has really two columns to show where the LOG-ID: ### string is the first, aligned on the left and LADIES STOCKINGS SYN-BLACK one is the second
I am trying to make a table in HTML/CSS and I am having trouble with the width of the cells. When I put "width: 24%" in the "table td" in CSS the table cells stays in the size that I want. OK, great. But when I put "width: 15%" the table cells grows??? And when I put "width: 8%" it takes all the space of the page. Why?
Here is the HTML code of the table:
<table border="1">
<caption>RGB colors and their combinations</caption>
<tr>
<td> </td> <td bgcolor="#FF0000">RED</td> <td bgcolor="#00FF00">GREEN</td> <td bgcolor="#0000FF">BLUE</td>
</tr>
<tr>
<td bgcolor="#FF0000">RED</td> <td bgcolor="#FF0000"> </td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#FF00FF"> </td>
</tr>
<tr>
<td bgcolor="#00FF00">GREEN</td> <td bgcolor="#FFFF00"> </td> <td bgcolor="#00FF00"> </td> <td bgcolor="#00FFFF"> </td>
</tr>
<tr>
<td bgcolor="#0000FF">BLUE</td> <td bgcolor="#FF00FF"> </td> <td bgcolor="00FFFF"> </td> <td bgcolor="#0000FF"> </td>
</tr>
</table>
And here is all the CSS code:
h1{
color: gray;
font-family: Bodoni, serif;
}
body{
text-decoration: blink;
font-family: "Times New Roman", Times, serif;
font-size: 18px;
padding: 5%;
padding-top: 1%;
}
table{
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
caption{
caption-side: bottom;
}
.italico{
font-style: italic;
}
.img_flickr{
text-align: center;
padding-top: 2.5%;
}
.img_flickr > a > img{
width: 50%;
min-width: 200px;
}
table tr{
text-align: center;
}
table td{
width: 24%;
}
The total width should be 100%,
when you set width 20%, first cell width or other cell should be 40%.
please change style to:
table
{
width: 100%;
margin: 2.5%;
border-collapse: collapse;
table-layout: fixed;
}
table td
{
width: 20%;
}
table td:first-child
{
width: 40%;
}
when you want to set style to first cell should be use below code
td:first-child
And when I put "width: 8%" it takes all the space of the page. Why?
That is a good question! I tried a few times, here is my observation:
Width of td is relative to it's parent, the tr. The tr is by default width:100% of the table.
Since you manipulate all the td tags, when you make them no longer fulfill the default 100% width of the table, the calculation of it's space may become buggy since this is not expected.
That would explain why, as soon as they're all < 25%, they begin to grow up.
The real question seems to be : what do you want to do ?
If you want the table to take larger or lesser space : manipulate it's width.
If you want some td to be larger than others : manipulate each of them while always making them all combined equal to the table width.
I am trying to create an Email Signature Generator. I am trying to get the blue line (it can be seen in the program) to stretch all the way down. However, when I do it, it stretches the rest of the items. I believe this may be because it is all inside a table and when one element is sized differently than the others, it tries it equal it out but I am not sure how to change it. Here is my code:
table {
display: inline-block;
}
#image {
width: 200px;
height: 200px;
border-radius: 50%;
}
.spacer {
width: 30px;
}
hr {
height: 200px;
width: 7.5px;
border-radius: 20px;
border: none;
background-color: cornflowerBlue;
}
#fullName {
font-family: 'Source Sans Pro', sans-serif;
font-size: 24px;
color: orange;
}
#job {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
padding-top: 11px;
}
#jobLocationText {
font-family: 'Source Sans Pro', sans-serif;
font-size: 15px;
padding-top: 6px;
}
<table cellpadding="0" cellspacing="0" border="0" style="background: none; border-width: 0px; border: 0px; margin: 0; padding: 0;">
<tr>
<td>
<img src="https://vignette2.wikia.nocookie.net/mafiagame/images/2/23/Unknown_Person.png/revision/latest?cb=20151119092211" id="image">
</td>
<td class="spacer"></td>
<td>
<hr>
</td>
<td class="spacer"></td>
</tr>
<tr>
<td>
<center>
<div id="fullName">Billy Staples</div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="job"><i>Programmer</i></div>
</center>
</td>
</tr>
<tr>
<td>
<center>
<div id="jobLocationText">at the <b id="jobLocation">HTML hub</b></div>
</center>
</td>
</tr>
</table>
And a working version can be found here.
Again, I am trying to get it so the hr (in the CSS) when the height is changed (to say 300 or something) it doesn't stretch the rest of the table with it. If you have an idea as to how I might be able to do my table differently so that it might be easier or just so that I could fix this problem, suggestions are welcome!
Thanks in advance!
Use rowspan="" to strech <hr> to way down,
<td rowspan="4">
<hr>
</td>
Here's your updated code, https://jsfiddle.net/he84kv8n/10/
<hr> is a horizontal rule (divider), bending it to be a vertical rule (divider) is a use case that will likely be difficult for anyone looking at your code to decipher.
I would suggest using a CSS border attribute on the table cell, that will automatically be the correct size.
I'm trying to replicate the design and structure of a Facebook page post.
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post td {
vertical-align: top;
}
.timestamp {
font-size: 13px;
color: #999;
}
<div class="post">
<table>
<tbody>
<tr>
<td>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<table>
<tr>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
Here is the JSFiddle of what I have: https://jsfiddle.net/6nodfbdj/
As you can see, the image is only 50x50, but it's pushing the td all the way out like that for no reason.
Somehow it's conflicting with the td that contains the content. So basically what's happening, is whatever the width of the content td is, is also being set for the td containing the image.
Any ideas?
As mentioned in one of the comments, tables are not to be used for formatting. They are for tabular data.
From The w3.org site
Tables should not be used purely as a means to layout document content as this may present problems when rendering to non-visual media. Additionally, when used with graphics, these tables may force users to scroll horizontally to view a table designed on a system with a larger display. To minimize these problems, authors should use style sheets to control layout rather than tables.
Note. This specification includes more detailed information about tables in sections on
https://www.w3.org/TR/html401/appendix/notes.html#notes-tables
Instead you should use CSS. While the layout and sizes aren't exactly the same as your fiddle, take a look at https://jsfiddle.net/ringhidb/jeeu2yrt/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 16px;
}
a {
color: #365899;
cursor: pointer;
text-decoration: none;
}
.post {
position: absolute;
}
.header {}
.logo {
float: left;
padding: .1em;
}
.info {
float: left;
padding: .25em;
}
.site {
font-size: 1.02em;
font-weight: bold;
}
.timestamp {
font-size: .75em;
color: #999;
}
.content {
clear: both;
}
</style>
<title>CSS Layout</title>
</head>
<body>
<div class="post">
<div class="header">
<div class="logo">
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</div>
<div class="info">
<a class="site">Toomblr</a>
<div class="timestamp">20/01/2017 - 11:43</div>
</div>
</div>
<div class="content">
Some content.
</div>
</div>
</body>
</html>
It's being set by the width of the text in the <td> containing "Some content". Try:
<td colspan=2>
Some content.
</td>
I don't know what you want to do, but try this.
.post td {
vertical-align:top;
float:left;
}
You had a "spare cell" what can be fixed with rowspan and colspan.
Try this:
<body>
<div class="post">
<table>
<tbody>
<tr>
<td rowspan=2>
<img src="https://scontent-lhr3-1.xx.fbcdn.net/v/t1.0-1/c34.34.431.431/s50x50/229746_457468357668297_1899772142_n.png?oh=a6c0ddb505a2485280d1661c1ee087df&oe=5916C9DF">
</td>
<td>
<strong><a>Toomblr</a></strong>
</td>
</tr>
<tr class="timestamp">
<td>
20/01/2017 - 11:43
</td></tr>
<tr>
<td colspan=2>
Some content.
</td>
</tr>
</tbody>
</table>
</div>
</body>
have you tried image width 100% ?
At first, yes I did search and found a lot of similar question and no, non of the solutions worked for me.
Now here is my main problem:
I try to get "a" elements in line and wrap if there are to much to fit inside the parent "td".
But I can either get them in line or warp.
"1st" and "2nd_main_container" are in line. the "1st" has a fixed width "2nd" take the remaining space of "wrapper".
I already tried with float inlineblock adding "width:100%" and my last try (see code) every "a" in a seperate "div" inside another main "div" Floating left. They won't wrap, they just grow the main "div", "td", "tr", "table" and "2nd_main_container". "wrapper" size dose not change.
I guess my problem is that "2nd_main_container" has no fixed width, but thats not an option.
I hope someone can help me with a solution to this. Thanks in advance.
http://jsfiddle.net/p7nhjr08/4/
here my code:
<style>
#wrapper {
width: 100%;
white-space: nowrap;
}
#1st_main_container {
display: inline-block;
padding-left: 16px;
padding-right: 8px;
padding-top: 8px;
padding-bottom: 16px;
width: 400px;
}
#2nd_main_container {
display: inline-block;
padding-left: 8px;
padding-right: 16px;
padding-top: 8px;
padding-bottom: 16px;
vertical-align: top;
}
#2nd_main_container th {
font-family: Tahoma, Geneva, sans-serif;
font-size: 11px;
font-weight: bold;
text-align: right;
}
#2nd_main_container td {
font-family: Tahoma, Geneva, sans-serif;
font-size: 12px;
font-weight: normal;
text-align: left;
padding-left: 20px;
}
#content {
white-space: normal;
overflow: hidden;
}
#content div {
float:left;
}
#container a {
padding-left: 8px;
padding-right: 8px;
padding-top: 0;
padding-bottom: 0;
}
</style>
<div id="wrapper">
<div id="1st_main_container">
Something
</div>
<div id="2nd_main_container">
<table>
<tbody>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td>
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td >
Something
</td>
</tr>
<tr>
<th>
Something:
</th>
<td id="container">
<div id="content">
<div>
<a></a>
</div>
<div>
<a></a>
</div>
...
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
So you have a wrapper with variable width, containing two div-columns. first one with fixed width, and second div shall use the remaining width, correct ?
Maybe you should have a look onto css3 flexbox