I have a very simple situation that I can't for some reason resolve. In ASP.NET I am trying to align the textbox inside the inline table with the text so that the text will point at the middle of the textbox, not at its foundation
Here is the markup
<span style="margin-bottom:10px">This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:bottom;padding: 0; margin: 0;">
<input name="TextBox1" type="text" id="TextBox1" />
</td>
</tr>
</table>
Here is the css
.inlineTable {
display: inline-table;
padding: 0;
border-spacing: 0;
border-collapse: collapse;
}
Here is how it looks
As it is seen in the attachment, the text points at the base. How can I move the textbox a bit down so that the text would point to the middle of the left side?
Thank you very much in advance
try vertical-align:middle on the table
.inlineTable {
display: inline-table;
padding: 0;
}
table{
vertical-align:middle;}
<span >This is the text</span>
<table class="inlineTable" border="1">
<tr>
<td style="vertical-align:middle;padding: 0; margin: 0;">
<textarea ID="TextBox1">hi</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 have table defined in style like this:
<style>
table.box-left, table.box-left td, table.box-left th {
border: 1px solid #005a8c;
border-collapse: collapse;
width: 320px;
box-shadow: 1px 1px 1px #888888;
margin-bottom: 5px;
}
table.box-left thead tr .lightgreen {
height: 20px;
background-color: #8DB135;
}
</style>
In the table cell I have an image and a paragraph of text, for some reason text doesn't wrap around the image. Can someone help?????
<table class="box-left">
<thead>
<tr>
<th class="lightgreen">Test</th>
</tr>
</thead>
<tr>
<td>
<img src="../images/54.jpg" width="80" height="140" />
Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
</td>
</tr>
</table>
Just add img { float: left; } and it should work as expected.
Check this fiddle.
Modify HTML like this:
<table class="box-left">
<thead>
<tr>
<th class="lightgreen">Test</th>
</tr>
</thead>
<tr>
<td>
<div id="floated">
<img src="../images/54.jpg" width="80" height="140" style="position: relative;" />
</div>
Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
Hello, for some reason text doesn't display correctly as it supposed to. Can you help? Thanks so much in advance!!!
</td>
</tr>
</table>
And add this to CSS:
#floated{
float: left;
}
Check This JSFiddle : http://jsfiddle.net/jhts4hxe/3/
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%;
}
I have created nested tables with the following markup, where the first table contains an example of a typical row:
<table class="outer">
<tr>
<td>
<table class="column" id="left_column">
<tr>
<td>
<table class="cell" id="t1">
<tr>
<td>
<asp:Literal runat="server" ID="t1r2c0" />
</td>
<td>
<asp:Literal runat="server" ID="t1r2c1" />
</td>
<td class="image">
<span id="s1" runat="server">
<asp:PlaceHolder ID="p1" runat="server">
</asp:PlaceHolder>
</span>
</td>
<td>
<asp:Literal runat="server" ID="t1r2c3" />
</td>
<td class="gray">
<asp:Literal runat="server" ID="t1r2c4" />
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="cell" id="t2">
<!-- ... -->
</table>
</td>
</tr>
</table>
</td>
<td>
<table class="column" id="rightColumn">
<!-- ... -->
</table>
</td>
</tr>
</table>
And here is the relevant CSS:
#rightColumn table, #leftColumn table {
width: 100%;
}
.cell {
border-collapse: collapse;
border: 2px solid black;
margin: 5px;
}
.cell td {
border-collapse: collapse;
border: 2px solid black;
text-align: center;
vertical-align: middle;
}
.image {
padding: 0;
margin: 0;
width: 75px;
}
In Firefox this renders like this:
but in IE6 it renders like this:
Two things are going wrong in IE:
The right hand border is missing from every table.
The 2nd and 3rd tables in the right hand column have arbitrary sizes for the last column despite the fact that these cells are class "image" and should have a fixed width of 75px.
Any advice is greatly appreciated.
EDIT: #rightColumn table, #leftColumn table { width: 100%; background: Red }
Check whether IE is rendering your page is in quirks mode or not. Quirks mode often affects element widths in particular, so I would suggest that this is a very strong candidate for the cause of your problem.
You should make sure the page is in standards mode in order to render correctly.
This is easily done by making sure the page has a valid doctype at the top of the page.
If you don't have a doctype, you can add any valid doctype to get it working in standards mode, but if you're not sure which one to use, just use the following:
<!DOCTYPE html>
Hope that helps.