Here is example:
<table>
<tr>
<td style="background: lightgreen; vertical-align: middle">
<button type="button">b1</button>
</td>
<td style="background: yellow; vertical-align: middle">
<button type="button">b2</button>
<textarea cols="40" rows="2"></textarea>
</td>
</tr>
</table>
And here is JSFiddle link: http://jsfiddle.net/jhqjumgL/1/
I guess it's self-explaining, i need here all buttons vertically centered, but button paired with textarea for some reason decided to rest at bottom, any idea how to solve ?
You need to vertically align the textarea as well:
button, textarea {
vertical-align: middle;
}
Fiddle: http://jsfiddle.net/abhitalks/jhqjumgL/2/
The vertical-align property to sets the vertical alignment of an element.
So, you give it to element display vertically like following :
button{
vertical-align : middle;
}
Try this
<table>
<tr>
<td style="background: lightgreen;">
<button type="button">b1</button>
</td>
<td style="background: yellow;">
<button type="button">b2</button>
<textarea cols="40" rows="2" style="vertical-align: middle"></textarea>
</td>
</tr>
</table>
Related
I have multiple elements in a cell of an HTML table. I want some of the elements to be aligned to the bottom of the cell and some to be aligned at the top. I am having trouble getting the elements to align to the bottom. My table is:
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
However the elements within the div seem to want to stay centered in the cell, rather than stay at the bottom. I have tried two different methods so far with CSS:
div.value_input {
position: absolute;
bottom: 0;
}
which just takes the div down to the bottom of the page. And:
div.value_input2 {
display: table-cell;
vertical-align: bottom;
}
Which has no effect.
I have the code here in JSFiddle
What do I need to do to get the input box and button to align to the bottom of the cell?
You need to set the parent elements position to relative position:relative in order to use absolute positioning. Here is a working snippet.
table {
border-collapse: collapse;
}
table, th, td {
border: 2px solid black;
position:relative;
}
div.value_input {
position: absolute;
bottom: 0;
}
div.value_input2 {
position:absolute;
bottom:0;
}
<table>
<tr>
<th style="background-color: #007CE2">
Test
</th>
<th style="background-color: #E54040">
Test
</th>
</tr>
<tr>
<td style="background-color: #007CE2">
<p id="t1_list">test<br>another<br>testing</p>
<input type="text" name="t1_input" id="t1_input">
<button>
Add
</button>
</td>
<td style="background-color: #E54040">
<p id="t2_list"></p>
<div class="value_input2">
<input type="text" name="t2_input" id="t2_input">
<button>
Add
</button>
</div>
</td>
</tr>
<tr>
<th style="background-color: #8BC34A">
Test
</th>
<th style="background-color: #FF9800">
Test
</th>
</tr>
<tr>
<td style="background-color: #8BC34A">
<p id="t3_list"></p>
<input type="text" name="t3_input" id="t3_input">
<button>
Add
</button>
</td>
<td style="background-color: #FF9800">
<p id="t4_list"></p>
<input type="text" name="t4_input" id="t4_input">
<button>
Add
</button>
</td>
</tr>
</table>
You need height:somepx for vertical align to work in this.
Make the table cell position: relative, and then you can try position: absolute on the div again...
table tr td {
position: relative;
}
div.value_input2 {
position: absolute;
bottom: 0;
}
fiddle
I want to display a vertical text on the header of a table; the header has a fixed height. And I want to hidden the overflow too.
My html is:
<table border='1px solid black'>
<thead>
<tr style='font-weight:bold; color:blue'>
<td width="60"> Data </td>
<td width="35"> Voto </td>
<td width="50"> Tipo </td>
<td width="10"> I </td>
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;overflow:hidden;"> Hi everybody </div>
</span>
</th>
<td> Annotazioni </td>
</tr>
</thead>
</table>
And my CSS:
table
{
border-collapse:collapse;
table-layout: fixed;
width: 400px;
}
th span {
writing-mode: tb-rl;
filter: flipv fliph;
-webkit-transform:rotate(-90deg);
white-space:nowrap;
display:block;
}
I have a problem: it appears only a couple of letters of the vertical text. Why?
Here you can see better: Example
Thank you very much for your help!
This seems like a strange layout for a table, and I'm not sure of the use case. Therefore, I'm not sure how flexible it needs to be, but adding this to th span fixes your example:
width: 200px;
text-align: center;
margin-left: -90px;
Also, add vertical-align: middle; to its containing th.
http://jsfiddle.net/m7nfU/22/
Remove overflow: hidden on the div encasing "Hi Everybody" which is hiding the rest of the letters.
<th style="color:red; height:200px; vertical-align:bottom" width="20">
<span>
<div style="width:100%;height:100%;">Hi everybody</div>
</span>
</th>
Then add, vertical-align: middle to the parent <th>, I further had to add a negative margin to make "Hi Everybody" to match the centre, as the text string started from the centre origin.
Fiddle: http://jsfiddle.net/m7nfU/24/
I'm writing a simple form for sending some data to a database.
I use it in my own company so I don't need to have a perfect style.
I am using a table for the layout (this is okay in this application).
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born <input type="text" name="nato_pf" /></td>
</tr>
</table>
I would like to set the width of the input text to 100% (to the end of the line) , but, if I do that, the input text wraps to a new line.
I have found solutions only using div and they are not for me at the moment.
EDIT: Sometimes I have two input (with different sizes) on the same line, so I think I cannot add other td tags.
http://jsfiddle.net/gmmr7/1
table {
border:1px solid black;
width: 200px;
}
.left {
float: left;
}
.left2 {
overflow: hidden;
padding: 0 4px;
}
.left2>input {
width: 100%
}
<table>
<tr>
<td>
<label class="left">Born</label>
<div class="left2">
<input type="text" name="nato_pf" />
</div>
</td>
</tr>
</table>
<table width="500px" style="border: 1px solid black; verflow: hidden">
<tr>
<td style="width: 50px;">
Born
</td>
<td>
<input type="text" name="nato_pf" style="width: 99%;" />
</td>
</tr>
</table>
99% of width because with 100% the textbox goes over the table's border :)
and also give a width to the first td ;)
jsFiddle http://jsfiddle.net/2yZmB/
you can define another td element
<table width="500px" style="border:1px solid black; overflow:hidden">
<tr>
<td>Born </td><td><input type="text" name="nato_pf" /></td>
</tr>
</table>
css
input{
width:99%;
}
here's my code:
<div class="search-option">
<div id="slider-days" class="search-opt-left"></div>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</div>
I want to make the slider and input field algin to the middle of the line.
How can i do that ? Thanks !
My CSS:
.search-opt-left {
float: left;
width: 250px;
vertical-align: middle;
}
.search-opt-right {
float: left;
margin-left: 20px;
}
This can be buggy.
What I usually do is make a table. And since table rows start with vertically-centered alignments, it's quite simple.
<div class="search-option">
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<div id="slider-days" class="search-opt-left"></div>
</td>
<td>
<input type="text" id="amount-days" class="search-opt-right input-small"/>
</td>
</tr>
</table>
</div>
You may then alter your CSS to get rid of the un-needed stuff.
Whats the best way to split up a table element <td>? I don't really want to use nested tables. I need the internal element to have two elements one that is left justified and the other to be right justified with no border.
For example:
<table>
<tr>
<td>LEFT, RIGHT</td>
</tr>
</table>
any other ways to do this besides the following?
<table>
<tr>
<td>LEFT</td>
<td>RIGHT</td>
</tr>
</table>
I want the internal element to be a <span> or whatever is best for this.
<table>
<tr>
<td>
<div style="float:left">LEFT</div><div style="float:right">RIGHT</div>
</td>
</tr>
</table>
I would do something like:
<td><div class="left>LEFT</div><div class="right">RIGHT</div></td>
then my css would resemble:
td{position: relative;}
td .left{position: absolute; text-align: left; left: 0;}
td .right{position: absolute; text-align: right; right: 0;}
... or something along those lines.
You could do it like this, although spans and divs are much better imo.
<table width="100%">
<tr width="100%">
<td width="100%">
<span style="float:left;">left</span>
<span style="float:right;">right</span>
</td>
</tr>
</table>
The floats didn't seem to look right so I used flexbox:
https://jsfiddle.net/6rc8w709/
.td-content{
display:flex;
}
.child{
flex:1;
}
.right{
text-align:right;
}
HTML:
<table>
<tr>
<td>
<div class="td-content">
<div class="child">
LEFT
</div>
<div class="child right">
RIGHT
</div>
</div>
</td>
</tr>
</table>
Flexbox is the right approach since it is now supported by all major browsers. This is an alternative approach if you need to target an older browsers or you don't like the drawbacks of floats. With this approach you can control the overflow of the left and right segment better and you can easily add a centered segment if you need one.
CSS:
table{
width: 100%;
}
.container{
width: 100%;
display: table;
}
.cell{
display: table-cell;
}
.cell .left{
text-align: left;
}
.cell.right{
text-align: right;
}
HTML:
<table>
<tr>
<td>
<div class="container">
<span class="cell left">LEFT</span>
<span class="cell right">RIGHT</span>
</div>
</td>
</tr>
</table>