Why my html table is getting out of my div? - html

I have a html table inside a div but the table is getting out of the div's width, here is what I am doing:
<div style="width: 920px">
<table style="width: 100%;">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>
this is not working


You have an empty layout so there is nothing to see. If you add height, you can see how it looks:
<div style="width: 920px;border:1px solid red;height:500px;">
<table style="width: 100%;" border="1">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
</div>​
EXAMPLE


Try adding some attributes to the table to ensure there is no cell spacing:
<table style="width: 100%;" border="0" cellspacing="0" cellpadding="0">

Related

How do I prevent text from different table from appearing on a picture html email code

So I place a picture in first table to position absolute to have text appear above it but the problem I'm having now is the table below text is also appearing on the image. How Do I prevent this from happening ?
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<img src="img/suit1.jpeg" width="590px;" height="500px;" style="position:absolute">
<h1>each</h1>
<button>SHOP Now</button>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>

Please try applying position: absolute to text elements. In my solution, i've wrapped text inside a div and applied position: absolute property. Also, i've applied position: relative to the parent element of both image and text.
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td style="position:relative;">
<img src="img/suit1.jpeg" width="590px;" height="500px;">
<div style="position:absolute; top: 0; left: 10px;">
<h1>each</h1>
<button>SHOP Now</button>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- end of row 3 -->
<!-- start of row 4-->
<tr>
<td>
<table width="100%" cellspacing="0" cellpadding="0" border="0" style="">
<tr>
<td>
<h1>hello</h1>
</td>
</tr>
</table>
</td>
</tr>

How to fixed the td width in table

I use easyui-panel with one table in my project.
I want to fixed each td width:50px;
Here is my code:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="position:absolute;width:50px;background-color:#fafafa">stack</td>
<td style="position:absolute;width:50px;background-color:#fafafa">john</td>
<td style="position:absolute;width:50px;background-color:#fafafa">stock</td>
<td style="position:absolute;width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="postion:absolute;width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
But it works fail. stack,john and stock are disappear. My table is in an abnormal stat.
When I deleted "position:absolute;width:50px;", all names can be show.like:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
All names can appear without fixed width, but it is not what i want.
Who can help me ?

You don't need to remove both position:absolute and width:50px.
Removing position:absolute and the width:100% from the <table> should result in what you want. So now your HTML looks like
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0">
<tr>
<td style="width:50px;background-color:#fafafa">stack</td>
<td style="width:50px;background-color:#fafafa">john</td>
<td style="width:50px;background-color:#fafafa">stock</td>
<td style="width:50px;background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="width:50px;background-color:#fafafa">Joy</td>
</tr>
</table>
If it doesn't result in what you want, it is possible that some CSS styles are adding additional padding or margins to the <td> element. Fire up the developer console (F12 on most browsers) -> right click on your element -> Inspect and in the CSS styles part look at the box model to find out if there is any additional padding/margins being applied

You can set your HTML talbe to be fixed width, then specify column widths:
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style=" table-layout:fixed;" >
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<col width="5px" />
<tr>
<td style="background-color:#fafafa">stack</td>
<td style="background-color:#fafafa">john</td>
<td style="background-color:#fafafa">stock</td>
<td style="background-color:#fafafa">shansa</td>
</tr>
<tr>
<td style="background-color:#fafafa">Joy</td>
</tr>
</table>
</div>
https://jsfiddle.net/56Lc4o44/

When I use unified format, It works OK
The code is:
<style>
.uTbId tr td{width:100px;background-color:#fafafa}
.uTbId tr td:hover{background-color:#0000CD;color:green;}
</style>
<div class="easyui-panel" id="pp" style="margin-top:30px;width:100%">
<table class="uTbId" cellspacing="0" style="width:100%" >
<tr>
<td >stack</td>
<td >john</td>
<td >stock</td>
<td >shansa</td>
</tr>
<tr>
<td>Joy</td>
</tr>
</table>

Yahoo mail layout center button

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/

Table Cells with different widths in different rows

I am weak in CSS, and I am trying to put a table in my html page, it has two rows and five columns per row(of course it is simplified), and it should look like this (the table is a hand-drawing table, it does not come so precise, I`m sorry for that.):
But mine looks like this:
This is my code:
<table border="1">
<tr>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:25px"> </td>
</tr>
<tr>
<td style="width:25px"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
<td style="width:50px" colspan="2"> </td>
</tr>
</table>
Code in jsfiddle is here.
NOTE:Any styles could be added, but structure of table could not be changed.
My problem is not the border style of table, but the width of cells, it seems that cells has a erratic width, I hope the right-border of first cell in second row could reach to the middle of bottom-border of first cell in first row, and the right-border of first cell in first row could reach to the middle of top-border of second cell in second row, so is others.
I have tried my best, but it still does not work. How could I do to match the requirement? Any suggestion will be appreciated. Thanks in advance.

You can use a <colgroup> element to achieve this:
<table border="1">
<colgroup>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
<col style="width: 25px"/>
</colgroup>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
It will tell the table that there are 9 columns and each row will span the columns as you originally had.
There are other non-table ways to acheive what you are looking for. Here is one quick example:
<div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
<div class="row">
<div> </div>
<div> </div>
<div> </div>
<div> </div>
<div> </div>
</div>
</div>
div.row
{
clear:both;
}
div div div
{
width: 50px;
border-width: 1px;
border-style: solid;
border-color: black;
display: inline-block;
float: left;
margin: -1px;
}
div div:nth-child(2n+1) div:first-child,
div div:nth-child(2n) div:last-child
{
width: 25px;
}

Use tables within tables..
<table>
<tr>
<td>
<table border="1">
<tr>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:25px"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table border="1">
<tr>
<td style="width:25px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
<td style="width:50px"> </td>
</tr>
</table>
</td>
</tr>
</table>
This way you will never have that problem...

For this to work, you need to have at least one row that defines the width of individual cells (ones that are not using cellspans):
http://jsfiddle.net/cR2qd/7/1
HTML:
<body>
<table border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
<td colspan="2"> </td>
</tr>
</table>
</body>
CSS:
td {
width: 25px;
}

How can I give a table that is inside of a TD 100% height i.e full height of the TD

This is how my table looks like. When I try to give the table 100% height but it doesn't work.
I want the TD that contains "xxx" to have 100% height i.e. the height of the parent TD.
</tr>
<tr align="left">
<td valign="top">
<table style="height:100%" border="1">
<tr>
<td>
<span title="Toggle between full screen and frames." id="showHideText" onclick="showHideFrames();"
class="buttonLabel" style="cursor:pointer; font-size:65%; font-weight:bold;">
Hide Frames
</span>
</td>
</tr>
<tr>
<td align="bottom" >
xxx
</td>
</tr>
</table>
</td>

Do you want something like this?
<table>
<tr align="left" style="height: 1000px">
<td valign="top">
<table style="height: 100%" border="1">
<tr>
<td>
<span title="Toggle between full screen and frames." id="showHideText" onclick="showHideFrames();"
class="buttonLabel" style="cursor: pointer; font-size: 65%; font-weight: bold;">
Hide Frames </span>
</td>
</tr>
<tr>
<td valign="bottom" style="height: 1000px">
xxx
</td>
</tr>
</table>
</td>
</tr>
</table>

Set the CSS height property:
style="height:100%;"