I have code
https://jsfiddle.net/ang3lwish/dnt4pv6m/2/
<div style="border:1px solid yellow;display:block;">
<table border=1 align="center">
<tr>
<th>No.</th>
<th>Name</th>
<th>Address</th>
<th>Gender</th>
<th>Email</th>
</tr>
<tr>
<td>
1.
</td>
<td>
Anto
</td>
<td>
Padang
</td>
<td>
Male
</td>
<td>
anto#gmail.com
</td>
</tr>
</table>
<br>
</div>
I want the div width (in line yellow) is follow table width?
But i don't know how to set css?
Make table width 100% Add this is your table tag
<table border=1 align="center" width="100%">
If you want the table to be fit to the div you need to put 100% width to the table
<table width="100%"> the table adjust itself depending on the div. cheers :)
If you want to follow the yellow line(i.e your div) without css then use width=100% in your table attribute but again only using this will not help you much for setting the table in div properly so better use this:
in css:
.pad
{
padding-top: 25px;
padding-right: 50px;//set as you like them//
padding-bottom: 25px;
padding-left: 50px;
}
and then include this class in table as:
<table border=1 align="center" class="pad">
Related
I want to add table to my website that will not change height or width when I added a picture. The picture needed to automatic resize to td.
How can I do it?
<table style="width:100%" border="1">
<tr>
<td style="width:34%"><!--Right-->
<table border="1" style="width:100%">
<tr>
<!--Symbol--><td>
<i class="fa fa-arrow-circle-right" style="font-size:72px"></i>
</td>
<!--Name--><td style="text-align:center"><b><font style="font-size:42px">dsfdsfs</font></b><br /><font style="font-size:32px">sdfdsdsf</font></td>
<!--logo--><td>
</td>
</tr>
</table>
</td>
<td style="width:32%" rowspan="8"><!--center-->
</td>
<td style="width:34%"><!--Left-->
<table border="1" style="width:100%">
<tr>
<!--logo--><td></td>
<!--Name--><td style="text-align:center"><img src="images/company/integrity.png" /></td>
<!--Symbol--><td style="text-align:left">
<i class="fa fa-arrow-circle-left" style="font-size:72px; left:0"></i>
</td>
</tr>
</table>
</td>
</tr>
</table>
Use max-width and max-height and set it to size of td or 100%
And I would like to suggest you NOT to write inline styles...
you using the % value to the table. So table are using current resolution i mean of the window in which you opened the page. In order to say for the table to stay in same height you need to use pixels for example:
570px; not 100% or 50% of the viewing screen.
so for the fist line i believe you can simple use the pixel value.
for example:
<table style="width:1200px" border="1">
for the image don't forget to add 100% values for example:
<td style="text-align:center" width="100%" height="100%"><img src="images/company/integrity.png" /></td>
I want to write the simpliest example of the following image
My example should work in ie6,7,8,9 and so on. So I can't use float or anything helpfull. I made jsFiddle using table
<table width="500px">
<tr>
<td width="45px"><span>e-mail</span>
</td>
<td align="center"> <div style="border-bottom: 1px solid;">test#gmail.com</div></td>
</tr>
<tr>
<td width="45px"></td>
<td align="center"> <span>(email)</span>
</td>
</tr>
</table>
, but the bottom (email) have margin from the line.
And I want that everything was like on my first image. Thanks
I have tried this.
Check this jsFiddle link
<table width="500px" style="padding:0px; border-spacing:1px">
<tr>
<td width="45px" style="padding:0px"><span>e-mail</span>
</td>
<td align="center" style="padding:0px"> test#gmail.com <hr noshade style="border-top:1px; -webkit-margin-before: 0; -webkit-margin-after: 0; -webkit-margin-top: 0; -webkit-margin-bottom: 0;"/> </td>
</tr>
<tr>
<td width="45px" style="padding:0px"></td>
<td align = "center" style = "margin-top:0px; padding:0px">(email)</td>
</tr>
The “margin” you are referring to is partly spacing between cells, partly padding inside the cell, partly leading, and partly spacing in the font. In your approach, the simplest fix is probably to set cell spacing to zero and to move the cell content upwards a bit, using relative positioning.
<table width="500" cellspacing="0">
<tr>
<td width="45">e-mail
</td>
<td align="center" style="border-bottom: 1px solid">test#gmail.com</td>
</tr>
<tr>
<td width="45"></td>
<td align="center"><span style="position: relative; top: -0.15em">(email)</span>
</td>
</tr>
</table>
apply border-spacing: 0 to the table's style (border-collapse: collapsewould work too, aswell as cellspacing attribute)
add padding: 0 to the tdcontaining <span>(email)</span>
To increase the space between the upper e-mail-adress and the bottom border (which you did not mention explicitly but is not the same as your example image):
move the border-bottom style from div to its parent td
add a padding-bottom to the same td
So I am creating tables on a page dynamically, and the rows in each table are also dynamic. I want to display them all in one line and make them scroll horizontally if there is an overflow instead of wrapping. I set inline and overflow scroll:
.tableDiv {width:100%; overflow:scroll; display:inline}
but they are still wrapping. Any help on this would be greatly appreciated!
Here is the jsfiddle: http://jsfiddle.net/xAxfr/
http://jsfiddle.net/xAxfr/2/
.tableDiv {
width:100%;
overflow:auto;
white-space:nowrap;
}
.table {
border-collapse:collapse;
border-spacing:0;
display:inline-block;
}
white-space:nowrap; and display:inline-block;
Remove float: left on .table and add white-space: nowrap on .tableDiv.
http://jsfiddle.net/xAxfr/1/
I think that you could use "The Table Method" as described here. If you next the tables in another table instead of a div, you can make the row as wide as you want creating the same effect.
ex.
<table class="tableContainer">
<tr>
<td>
<table class="table">
<tr>
<th colspan="2">
Table One
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
<td>
<table class="table">
<tr>
<th colspan="2">
Table Two
</th>
</tr>
<tr>
<td>
two
</td>
<td>
three
</td>
</tr>
<tr>
<td>
four
</td>
<td>
five
</td>
</tr>
</table></td>
I have a HTML table in a <div>:
<div id="ticket_summary" style="height:60px;">
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td colspan="2" bgcolor="#666666" align="left"><font color="#FFFFFF"><strong>Summary</strong></font></td>
<td bgcolor="#666666" align="right"><font color="#FFFFFF"><strong><?php echo $result["datetime"]; ?></strong></font></td>
</tr>
<tr>
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
</tr>
<tr>
<td colspan="3"><hr /></td>
</tr>
</table>
</div>
I then have another table below:
<table width="100%" border="0" cellspacing="5" cellpadding="5">
<tr>
<td><div id="showticketupdates"><a onclick="show_ticketupdates()"><h3>Show Ticket Updates</h3></a></div>
<div id="hideticketupdates" style="display:none;"><a onclick="hide_ticketupdates()"><h3>Hide Ticket Updates</h3></a></div></td>
</tr>
</table>
the ticket_summary <div> is displaying over the link below. I think it has something to do with the style on the <div> - what can i add to stop it doing this?
Firstly, write this:
<div id="ticket_summary">
in place of:
<div id="ticket_summary" style="height:60px;">
Then, write this:
<td colspan="3"><div style="overflow-y: scroll; height: 60px;"><?php echo nl2br(stripslashes($result["summary"])) ;?></div></td>
in place of:
<td colspan="3"><?php echo nl2br(stripslashes($result["summary"])) ;?></td>
Instead of height, try making it to min-height, so:
<div id="ticket_summary" style="min-height:60px;">
Therefore it will extend when the length of ticket_summary div exceeds 60px.
Also try putting your second table in a div.
EDIT:
If you want to have a fixed height and just show a scroll bar when it exceeds your desired height, then just keep the height and add an overflow: scroll; to your ticker summary div:
<div id="ticket_summary" style="height:60px; overflow:scroll;">
Also, I noticed that you put an hr at the end of the table. But this will not be displayed if there's an overflow so I suggest that you just move the <hr /> at the end of the first table.
See this fiddle: http://jsfiddle.net/AmqRJ/
I need to create a table with 2 cells (or 2 divs. Doesn't matter), which will be contained within a TD tag, like this:
<td style="height:200px;">
<table>
<tr>
<td>Top Cell</td>
</tr>
<tr>
<td>Bottom Cell</td>
</tr>
</table>
</td>
Each cell will contain 1 image (see image below). My problem however, is the image in the top cell always needs to be at the very top and the image in the bottom cell always needs to be at the very bottom, irregardless of the height of the parent TD tag. So in the example below, lets say sample #1's parent TD tag is 200px height. The images align to the very top and bottom of their cells. If I switch the height of the TD tag to 800px (Sample #2), then the images should still align properly.
alignment sample http://functionalevaluations.com/images/imagealignment.jpg
I should also mention that I can't hardcode a height into the table itself. The height of the table will always need to be 100% of the parent TD tag and the only value where I can manually adjust the height value is in the parent TD.
How can I do this? Oh, also it doesn't matter if this is a table or divs or whatever. The only thing that needs to be there is the parent TD tag.
Finally, here's my current HTML. My parent TD adjusts fine, however the height of my table is always no more than the height of my 2 images. I can't seem to get it to be the same height of the parent TD:
<td width="155" valign="top" rowspan="2" style="border:solid 1px #000;height:200px; ">
<table border="1" cellspacing="0" cellpadding="0" style="height: 100%;">
<tr>
<td valign="top" style="height:50%;">
<img src='includes/images/itemImages/TopImage.jpg' border="0"
style="vertical-align: top">
</td>
</tr>
<tr>
<td valign="bottom" style="height:50%;">
<img src='includes/images/itemImages/bottomImage.jpg' border="0" style="vertical-align: bottom">
</td>
</tr>
</table>
</td>
Try this - DEMO
HTML
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<td class="top">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
<tr>
<td class="bottom">
<img src='http://lorempixel.com/100/100' />
</td>
</tr>
</table>
CSS
img {
display: block;
margin: auto;
}
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }