With the below code, I get the columns size being different (esp the last column is small) I would like to have all the three columns to be of same size.Thanks.
<html>
<body>
<h4>Two rows and three columns:</h4>
<table border="1" width="100%" height="400" align="top">
<tr style="height: 1">
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>1-1</td>
<td>1-2</td>
</tr>
<tr>
<td>1-3</td>
<td>1-4</td>
</tr>
</table>
</td>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>2-1</td>
<td>2-2</td>
</tr>
<tr>
<td>2-3</td>
<td>2-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100" align="top">
<tr>
<td>3-1</td>
</tr>
<tr>
<td>3-2</td>
</tr>
</table>
</td>
</tr>
<tr style="vertical-align: top">
</td>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>4-1</td>
<td>4-2</td>
</tr>
<tr>
<td>4-3</td>
<td>4-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>5-1</td>
<td>5-2</td>
</tr>
<tr>
<td>5-3</td>
<td>5-4</td>
</tr>
</table>
<td>
<table width="100%" border="2" height ="100">
<tr>
<td>6-1</td>
</tr>
<tr>
<td>6-3</td>
</tr>
</table>
</body>
</html>
Insert a colgroup element in your table:
<table>
<colgroup>
<col style="width: 33%" />
<col style="width: 33%" />
<col style="width: 33%" />
</colgroup>
<tr>
...
</tr>
</table>
Few fixes to consider
<table style="table-layout: fixed; width: 100%;"> <!- set table layout to fixed and width to full width -->
<colgroup>
<col style="width: auto" /> <!- takes the remaining space -->
<col style="width: 33.3333%" /> <!- or use 33.3333% for all instead if you want to occupy full width -->
<col style="width: 33.3333%" />
</colgroup>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
...
</table>
Just set each <td> of the first level table to width="33%"
You could try to set your the width of your columns to be absolute, instead of relative:
< TD WIDTH=200>
Try looking at this link.
An alternative is to set the css width of the table to 100% e.g.
table { width:100% }
The cells should inherit this and be of equal size. That way you are more flexible to different numbers of columns.
Related
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>
Table cell image and cell background image is not displaying:
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
Just try this.
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="../images/refresh.jpg" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Since it is img not image and TD element dosn't have the background attribute, you can put your custom style inside the style attribute just like above.
Try using this:
<td style="background-image: url('../images/refresh.jpg')" width="100%">
Also, it's probably pretty likely that your path is incorrect. Try inserting:
<?php if(file_exists("../images/refresh.jpg")){
echo "IT EXISTS!";
}
else{
echo "NOT FOUND!";
}
?>
That should tell you if your path is correct or not.
<image> is not a tag, it is abbreviated the to <img>, so it should be something like this: <**img** src="../images/refresh.jpg" alt="Test">.
In the following example I added an image from the net to show you:
td {
border: solid 1px black
}
<table border="1">
<colgroup>
<col width="150" />
<col width="350" />
</colgroup>
<tbody>
<tr>
<td height="100%" width="100%"><img src="http://lorempixel.com/400/200" alt="Test"></td>
<td style="background:url(../images/refresh.jpg);" width="100%"></td>
</tr>
</tbody>
</table>
Hope it helped.
You are probably not seeing anything since the first td is 100%.
Change the first td to take up 92% or anything less than 100% of the width.
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"> </td>
<td background="../images/refresh.jpg" width="8%"></td>
<table border="1">
<colgroup>
<col width="150"/>
<col width="350"/>
</colgroup>
<tbody>
<tr>
<td height="100%" width="92%"><image src="../images/refresh.jpg" alt="Test"></td>
<td background="https://media.giphy.com/media/10S1CGpBU06FZ6/giphy.gif" width="8%"></td>
</tr>
</tbody>
</table>
http://imgur.com/a/fKv2H
I need banner with height 100px. and img inside it with height 120px. So the picture comeee out my banner for 20px;
Its for emails.
Also i need text column right before picture, so that text in column with background f4f4f4
<table>
<tr>
<td>
<img src="" style="margin-top:-20px;" />
</td>
<td>
banner text here
</td>
</tr>
</table>
You can do this two ways, one involved slicing the image into two and the other is using two more tables. I have added the code below for you to decide which one you want to go with.
Option 1:
This option has the image as one piece sitting in an outer table with 3 columns. The outer two columns have a table with white background to cater for the heads/hats popping out of the grey area. I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
<td width="171" valign="top"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
Option 2
For this option, you will need to slice the top part of the image (with white background) and place both the images in one table with two rows. Both images are centered and I have set the table width at 100% to show it will look.
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td align="center" valign="top" bgcolor="#ffffff"><img src="http://i64.tinypic.com/lz7f6.png" style="display: block;">
</td>
</tr>
<tr>
<td align="center" valign="top" bgcolor="#f4f4f4"><img src="http://i68.tinypic.com/4qo1mu.png" style="display: block;"></td>
</tr>
</tbody>
</table>
The final outcome for both codes should look like this:
Let me know which option best suits you.
** UPDATE **
Your question asked if you can have option 1 with image to the left and text on the right, here is the example:
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td width="171" valign="top" style="padding-left:20px;"><img src="http://i67.tinypic.com/sdk1hh.jpg" width="171" height="178" style="display: block;"></td>
<td valign="top" bgcolor="#f4f4f4">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td bgcolor="#ffffff" style="height: 23px;" height="23"></td>
</tr>
<tr>
<td style="font-family:Arial; font-size:12px; color:#000000; padding:5px 10px;">This is some text for your email</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I added colors so you could see that it was outside the table. I gave the image a height of 120px, width of auto. Made the td's have a max-height of 100px; And I left your -20px margin on the image.
<body style="background-color:pink">
<table style="background-color:orange;">
<tr>
<td style="max-height:100px; overflow-y:initial;">
<img src="https://i.imgur.com/ZESO4DT.png" style="margin-top:-20px; height:120px; width:auto;" />
</td>
<td style="max-height:100px;overflow-y:initial;">
banner text here
</td>
</tr>
</table>
</body>
How do I make a table data only scrollable (Not entire table or row, just one cell)? This is the best I could do, but the display:block; makes all table cells of equal size. (with a different display or no display, a scrollbar appears but is not scrollable as the cell becomes bigger too)
<table border="1" width="100%" height="100%">
<tr>
<td rowspan="2" width="30%" height="10%">
</td>
<td width="60%" ><font color="#FFF" style="font-weight:bold">
<p>Coventry University - CV1 5FB</p>
</td>
</tr>
<tr>
<td height="90%" style="display:block; overflow-y: scroll; "><font color="#FFF">
<p>I WANT THIS CELL TO BE SCROLLABLE</p>
</td>
</tr>
</table>
<table border="1" width="100%" height="100%">
<tr>
<td rowspan="2" width="30%" height="10%">
</td>
<td width="60%" ><font color="#FFF" style="font-weight:bold">
<p>Coventry University - CV1 5FB</p>
</td>
</tr>
<tr>
<td height="90%"><font color="#FFF">
<p style="display:block; overflow-y: scroll; ">I WANT THIS CELL TO BE SCROLLABLE</p>
</td>
</tr>
</table>
I guess this is what you want;
I advise that don't give "td" overflow, but you can add overflow include "td";
I've got a table with two rows. The first row just has three cells. The second row has two cells, with the first cell containing another table that needs to fill the whole cell.
<table border="1" style="border-collapse:collapse;">
<tr>
<td style="WIDTH: 205px;">1</td> <!--This width doesn't apply in Chrome-->
<td style="width:100%;">2</td>
<td style="WIDTH: 5px;">3</td>
</tr>
<tr>
<td colspan="2">
<TABLE width="100%" border="1" style="border-collapse:collapse;table-layout: fixed;">
<TR>
<TD style="width:130px;">
A</TD>
<TD style="width:90px;">
B</TD>
<TD style="width:230px;">
C</TD>
</TR>
</TABLE>
</td>
<td>
D
</td>
</tr>
</table>
Simple enough, really....or so I thought.
It appears as I would expect in IE. But Chrome seems to not apply the width of the first cell correctly. It seems to be affected by the table in the cell below.
Why is this happening, and how can I get around this?
Two things you should do:
On the table element, use table-layout: fixed;
Insert columns and give them a width
(You could also assign width to table headers/cells of the first row)
Like this:
<table border="1" style="table-layout: fixed; width: 100%;">
<colgroup>
<col style="width: 205px;">
<col style="width: auto;">
<!-- Use "width: auto;" to apply the remaining (unused) space -->
<col style="width: 5px">
</colgroup>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<!-- Etc. -->