I am trying to make the button align up with the textbox, but I can not get it to work, if you need more code, I will be glad to post it :)
Here is my code: http://jsfiddle.net/Hunter4854/FFcAu/
<table class="chatMain" width="100%" height="100%" cellpadding="10" cellspacing="0" border="0">
<tr>
<td align="center" class="MainView" valign="middle">1</td>
<td align="center" valign="middle" class="SideAd" width="185px" rowspan="3">AD</td>
</tr>
<tr>
<td align="center" class="controls" valign="middle">
<textarea class="chatInput"></textarea>
<button type="submit">Send</button>
</td>
</tr>
</table>
Try to add vertical-align: middle to form elements themselves.
Entire contents (as a solid thing) of table cell are vertically aligned within the cell while mutual aligning of each inline element inside contents is specified via vertical-align of these inline elements, not table cell.
Add display: block and float: left to your .chatInput and button class:
.chatInput
{
display:block;
float:left;
width: 500px;
font-size: 12pt;
height: 75px;
box-sizing: border-box;
border: 1px solid #000;
padding-left: 5px;
padding-right: 5px;
outline: none;
resize:none;
}
button {
display:block;
float:left;
height:75px;
}
Fiddle: http://jsfiddle.net/kboucher/xH8sm/
Related
I created a but it's not aligning my text to the . I've tried adding !important but the results are still not working. How can I fix this?
Here is my code below:
<div>
<table width="100%" cellspacing="0" cellpadding="0" role="presentation">
<!--Bullet 1 -->
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important;">1
</td>
</tr>
</table>
</div>
Please help?
The display: inline-block; renders the vertical-align ineffective.
Explanation: vertical-align is only valid for display: table-cell. So, if you change the display mode, the alignment becomes invalid.
Solution: Remove the display from the CSS style.
Add line-height:26px on td
<table>
<tr>
<td align="center" style="background-color:#dc1f26;height: 26px; width: 26px; border-radius: 50%; display: inline-block;color: #ffffff;font-family:Arial,Helvetica,sans-serif;font-weight:bold;font-size:16px;vertical-align: middle!important; line-height: 26px;">1 </td>
</tr>
</table>
Delete the both of "display:inline-block" and "vertical-align:middle" then add "text-align: center".
How about adding span for the text?
<span style="display:flex; height:100%; align-items:center; justify-content:center;">1</span>
I've read a lot of questions about this problem, but none of those could solve it perfectly: the cell won't be clickable at its full height.
As shown in the picture, I made a headline for my webpage using the <table> tag and colored the clickable content into blue, while the whole table is orange.
The HTML code is:
<table class="visible" id="menu" align="center">
<tr>
<td><p>Home</p></td>
...
</tr>
</table>
And the CSS code is:
#menu a {
display: block;
text-decoration: none;
}
Unfortunately, as you can see, not the whole cell is blue, therefore not the whole cell is clickable. Could anyone tell me a perfect solution for this (possibly without using JavaScript)?
Try display: flex and justify-content: center instead of display: block.
a {
background: lightblue;
display: flex;
justify-content: center;
text-decoration: none;
}
<table align="center" border="1">
<tr>
<td><p>Home</p></td>
</tr>
</table>
Do not use <p/> (block-level) inside <a/> (inline-level).
a::after {
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
}
delete styles for "a".
https://jsfiddle.net/1nrbL1mu/9/
This also works for IE:
a::after
{
display:block;
content:" ";
position:absolute;
top:0;
left:0;
width:100%;
height:300px; /* max possible */
background:yellow;
z-index:-1;
}
td
{
position:relative;
z-index:0;
overflow:hidden;
}
https://jsfiddle.net/1nrbL1mu/12/
Try puting it o new table of one column and one row
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> <a href="#" title="Conoce más" style="text-decoration: none; color: #010000;" target="_blank">
<table align="center" width="175" border="0" cellspacing="0" cellpadding="0">
<tr>
<td style="border: 1px solid #f3b946; text-align: center; padding: 10px 35px 10px 35px; font-size: 18px;">CONOCE MÁS
</td>
</tr>
</table>
</a>
</td>
</tr>
</table>
I have a table in html.
The content of this table is text and an image. I would align the text in the top-left corner and the image in the middle (vertical-align).
I tried in this way:
CSS:
table td {border-collapse: collapse;}
#tabella {border: 1px solid black; text-align: left; vertical-align: top;}
#variante {vertical-align: middle;}
HTML:
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text
<br>
<img id="variante" width="75" border="0" src="www.favetta.com/image.png">
</td>
But in this way I obtain all (text and image) aligned in the top-left corner of the cell.
Any suggestion?
Are you doing this for an email? If so inline styling is fine (although won't work in all email clients so have a default.
If email do something like...
<table>
<tr>
<td align="center">
<table width="100%">
<tr>
<td align="left">This is text</td>
</tr>
</table>
<br/><br/>
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
<br/><br/><br/><br/>
</td>
</tr>
<table>
It looks crude but some browsers and email clients will ignore 'height='. This is purely what Ive found from years of email templating.
If not email, try and avoid tables - but if you can't then try something like...
<table>
<tr>
<td class="content">
This is text
<img src="http://s27.postimg.org/fs9k8zewj/cow1.png">
</td>
</tr>
<table>
css
table{
border:1px solid grey;
width:100%;
}
.content{
text-align:left;
}
.content img{
width:75px;
vertical-align:middle;
transform: translate(-50%, -50%);
margin: 100px 50% 50px 50%;
}
https://jsfiddle.net/qbss1f0t/
Here is a simple example:
table{
border:1px solid #000;
}
table tr{
height:200px;
}
table td{
width:200px;
text-align:center;
}
.textNode{
text-align:left;
padding:0;
margin:0;
vertical-align:top;
}
.imgNode img{
width:75px;
margin: auto;
}
<table>
<tr>
<td class="textNode">This is text</td>
<td class="imgNode"><img src="http://s27.postimg.org/fs9k8zewj/cow1.png"></td>
</tr>
<table>
Here is a fiddle
This should get you to where you want.
Side Note: inline styling is not a good practice.
Use this may help you
<table width="100%">
<tr>
<td id="tabella" style="padding:6px 8px; border-left: 1px solid #eeeeee;">text</td>
<td><img id="variante" width="75" border="0" src="www.favetta.com/image.png"></td>
</tr>
<table>
http://jsfiddle.net/HnnHf/1/
Trying to understand what I do wrong. Plain table, I want input boxes to fill cells evenly. On first row you see 2 inputs and second row has one input spanned across cells.
Their right sides don't match. Why? When I run inspector it shows additional pixels?
Part of my HTML:
<div style="width: 1000px; margin-left: auto; margin-right: auto; padding-left: 20px; padding-top: 10px;">
<table>
<tr>
<td style="width: 80px;"><label>From </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>To </label></td>
<td style="width: 120px;">
<input type="text" class="fill-space" />
</td>
<td style="width: 80px;"><label>Sort by </label></td>
<td></td>
</tr>
<tr>
<td colspan="6"> </td>
</tr>
<tr>
<td></td>
<td colspan="3">
<input type="text" class="search" />
</td>
<td></td>
<td>
Refresh button
</td>
</tr>
</table>
</div>
Style:
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: central;
}
input.fill-space {
width: 100%;
}
input.search {
width: 100%;
background-image: url("/images/Search.png");
background-position: right center;
background-repeat: no-repeat;
}
</style>
My live site misalignment:
Also, why do I get this another border inside input if I set background?
Working fiddle: http://jsfiddle.net/ghUEw/
Default padding and margins for table elements differ in different browsers.
So you'd better use a CSS reset on table elements.
table * {
margin: 0;
padding: 0;
}
Then, comes the border-collapse property. It determines whether the table borders are collapsed into a single border or rendered individually, let's say for neighboring table cells. You need to set it as following to make them collapsed since you have different number of cells per table row.
table {
border-collapse: collapse;
}
Then, you need to set the borders of the inputs in your table if you want them look the same.
table input {
border: 1px solid #aaa;
}
If you don't want any borders to appear, replace it with border: none;
Then, in your CSS, for the labels to appear the way you want, you can apply float:right; (also corrected vertical-align: middle;)
td label {
width: 100%;
color: #F1F1F1;
text-align: right;
vertical-align: middle;
float:right;
}
I'm trying to get a table to be 100% width of a div...
But when I use width=100% it expands outside of the borders... When using on different devices...
So I'd just like this table, across full width - and the N/A button right aligned...
Seems it is always extending past borders on different devices...
<div class=flist>
<table cellpadding=2 border=1>
<tr>
<td valign=middle>
<img src="images/plus.png" height=14 width=14 border=0 align=middle> <b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
Take this example :
<html>
<body>
<head>
<style>
.flist{
border:1px solid red;
padding:5px;
width:500px;
}
table{
width:100%;
border:1px solid;
}
</style>
</head>
<div class="flist">
<table cellpadding="2" border="1">
<tr>
<td valign=middle>
<b>General Stuff</b>
</td>
<td align=right>
<input type="button" name="CheckAll" value="All N/A" class=verd8></td>
<td> </td>
</tr>
</table>
</div>
</body>
</html>
Just an inline css example, but it works if you change .flist width the table width changes, note the red color of the .flist versus black of table.
div.flist{width:500px;}
div.flist table{width:100%;}
This should work in most cases.
if you need mobile, use media queries instead.
Adding 1% each side is = 20px so just minus that from the table width. 1% = 10px;
*{
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
table{
width: 100%;
border-spacing: 0;
border-collapse: collapse;
empty-cells:show;
}
table.bordered{
border-collapse:separate;
border:1px solid #ccc;
border-radius:4px;
}
th,td{
vertical-align:top;
padding:0.5em;
}
tr:nth-child(2n){
background-color:#f5f5f5;
}
-
<table class="bordered">
<tbody></tbody>
</table>
Just write table tag like this
<table width=100%></table>
This might have worked
Added this also into table
style="table-layout:fixed"
.flist {
font-family: Verdana; font-size: 13pt; font-weight: bold;
overflow: hidden;
position: relative;
background-color: #e9e9e9;
padding: 5px;
margin-top: 5px;
margin-left: 1%;
margin-right: 1%;
border: 1px solid #000;
}
.flist > table
{
width: 100%;
}
<div class=flist>
<table cellpadding=2 border=0 style="table-layout:fixed">
<tr>
<td valign=middle>
<b>General</b>
</td>
<td align=right>input type="button" name="CheckAll" value="All N/A" class=verd8></td>
</tr>
</table>
</div>