I have three tables. When they are all filled with data (10 rows) they look fine. See picture
When, however, the max capacity (i.e. 10 rows) hasn't been reached, the tables gets centered.
I want to keep the alignment top as in the first picture and also the buttons on the bottom. Is there any simple style to do this? My HTML looks like this
<table width="100%">
<tr>
<td>
<table id="SomeTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev1"><<</button>
<button id="next1">>></button>
<button id="create1">Create</button>
</td>
<td>
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
<td>
<table id="OtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev3"><<</button>
<button id="next3">>></button>
</td>
</tr>
</table>
Hi now add td valign="top"
As like this
<td valign="top">
or
Used in
css
td{
vertical-align:top;
}
Simply add this to your first TR:
<tr valign="top"></tr>
add style
td { vertical-align: top;}
try this
<td valign="top">
<table id="SomeOtherTableContainer">
<tr>
<th>Name</th>
</tr>
</table>
<button id="prev2"><<</button>
<button id="next2">>></button>
<button id="create2">Create</button>
</td>
Related
I'm working with a html table that's generated dynamically and trying to place an icon/image in a column on the left side that spans the length of multiple table rows. In my example, I would like to place a single image in the colored shaded areas. This needs to be done using html & css. I'll be using the same icon in each block:
Here's a sample of the table structure:
<table border="0">
<tbody>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
Here's my icon div that needs to go in the shaded areas:
<div class="icon"><i class="far fa-newspaper"></i></div>
Obviously, this ain't gonna work:
<table border="0">
<tbody>
<div class="icon"><i class="far fa-newspaper"></i>
<tr>
<td>
{dynamic title}
</td>
</tr>
<tr>
<td>
{dynamic description}
</td>
</tr>
</div>
<tr>
<td>
{dynamic archives}
</td>
</tr>
</tbody>
</table>
td {
width: 100px;
background: green;
}
<table>
<tr>
<td rowspan=2>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
</table>
You could use rowspan from table to span multiple rows.
I have the following html in one of my mails:
<center>
<table class="button">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</center>
The problem is that on Gmail this Set Now button is properly centered but on Yahoo it is aligned to the left side. Here is picture that shows the problem:
Try following code :
<td align="center">
Set Now
</td>`
Nesting another <table> is safer than using <center>. This should cover all your bases:
<td style="text-align: center;">
<table class="button" align="center" style="margin: auto">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
</table>
</td>
Try with
<table class="button" width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="100%" align="center">
Set Now
</td>
</tr>
</tbody>
Set margin-left and margin-right to auto to the parent table. Like this,
<table class="button" style="margin-left:auto;margin-right:auto;">
<tbody>
<tr>
<td>
Set Now
</td>
</tr>
</tbody>
Although I must say that only styling the anchor tag to be a button is not going to work across all email clients, you probably should use code generated from here https://buttons.cm/
I have a page with 3 tables inside, one of which is generated from server data and can have any number of rows. The other 2 tables are used to float on top and display buttons and table headers that can be visible at all times. Here is some code:
<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
<tr>
<td>
<table>
<tr>
<td> Cart </td>
<td> Quantity </td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top:60px; height:auto; width:100%;">
#foreach (var item in Model) {
<tr>
<td>
#Html.Partial("MoreInformation", item)
</td>
</tr>
}
</table>
<table style="position:absolute; bottom:100px; height:70px; width:100%;">
<tr>
<td>
<table>
<tr>
<td style="text-align:left;">
<button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
</td>
</tr>
</table>
</td>
</tr>
</table>
There is a problem with this setup:
I have a menu on the left side. When I collapse it, the table with MoreInformation follows is smoothly, but the other 2 tables stay fixed on their positions.
How can I make the "floating on top" tables move along with the data table (the table with MoreInformation?
P.S. I have tried placing the 2 tables inside a div, making that div position:fixed and the table inside position:relative but it does not work.
<table style=" position:absolute, top: 110px; z-indez:1; width:100%;">
<tr>
<td>
<table align="left">
<tr>
<td style="text-align:left;">
<button type="button" onclick="window.location.href='/Home/Index'">Go Home</button>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td> Cart </td>
<td> Quantity </td>
</tr>
</table>
</td>
</tr>
</table>
<table style="margin-top:60px; height:auto; width:100%;">
#foreach (var item in Model) {
<tr>
<td>
#Html.Partial("MoreInformation", item)
</td>
</tr>
}
</table>
Tried various solutions but I can't get any to work and I have a very hard time getting my head about positioning HTML elements. This one should be about as easy as they come imo. Still...
NOTE: The button is NOT to be part of the table.
I have a table and I want to position a button to the right of the table, with the bottom of the button bottom vertically aligned to the bottom of the table.
Edited to provide basic layout.
<table id="someTable">
<tr>
<td>SomeCell</td>
</tr>
</table>
<button id="somebutton">
A button
</button>
You can try this:
Updated fiddle here
<table id="someTable">
<tr>
<td>Some cell</td>
</tr>
<tfoot>
<tr>
<td valign="bottom" align="right">
<button id="someButton">
A button
</button>
</td>
</tr>
</tfoot>
</table>
Good luck.....
Managed to get it working.
<div>
<table id="someTable">
<tr>
<td>SomeCell</td>
</tr>
</table>
<button id="someButton">
A button
</button>
</div>
#someTable
{
display: inline-table;
}
#somebutton
{
display: inline-block;
vertical-align: bottom;
}
http://jsfiddle.net/Pf9Y7/
<table border="1" width="250">
<tr>
<td>Hello <br/><br/><br/></td>
<td valign="bottom" align="right"><button type="button">Click Me!</button></td>
</tr>
</table>
Look at this code:
<table width="100%">
<tbody>
<tr>
<td style="width:20%;"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>
The "hello world" in the left <td>
just stays at the middle (sometimes even at the bottom),
so what attribute should I set to let the word stay at the top of the table?
Here is an online example at JSFiddle
Just add vertical-align: top; to the td style.
See it here.
<table width="100%">
<tbody>
<tr>
<td style="width:20%;" valign="top"><span>hello world</span></td>
<td style="width:60%;">
<textarea style="width:100%;height:200px;"></textarea>
</td>
<td>
</td>
</tr>
</tbody>
</table>