So I have a table, like the below
<table>
<tbody>
<tr>
<td rowspan="4">
<img src="ImageofProduct.jpg" />
</td>
<td>ProductName</td>
<td>Hat</td>
</tr>
<tr style="height:1%">
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr style="height:1%">
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr>
<td colspan="2"><button /></td>
</tr>
</tbody>
</table>
Now you can see the first cell has a img which is going to span every row of the table. Sometimes this image will be taller then the content on the right sometimes it won't be..
Now I have applyed height:1% on each row so that instead of firefox trying to evenly spread the height of each row to match the height of the image. They will be as small as possible apart from the last one which will span the rest of the height left over.
In Firefox this works perfectly but in chrome it doesn't feel the need to make the other all the rows total height match that of the first cell that spans every row.
Is their a way to get it to work ok in chrome? or at least both to behave the same?
I just tried your code and it works on chrome for me.
However, since your using tables anyway you could always go back to pre-CSS days:
<tr>
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr>
<td>Description</td>
<td>Descriptions here</td>
</tr>
<tr height="*">
<td colspan="2"><button /></td>
</tr>
Related
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p><img src="mail.ping" style="width: 30px;"></p>
<span>type-cedit ad=nd debit and shopping</td>
<td>description</td>
</tr>
</table>
The above image is show table data. when image and text aligned inside table cell.
This works fine when text is smaller. but when text size is large. text is appearing below image.
In above image i need to make the 'shopping' work should come jus below 'type' if length is large. Text should not appear below image. how can i fix this alignment issue
Applying display:inline-block or float:left you can align both
.divin{
display:inline-block;}
<table style="width:100%">
<tr>
<th>type</th>
<th>descritpion</th>
</tr>
<tr>
<td><p class="divin"><img src="https://www.google.co.in/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" style="width: 30px;"></p>
<span class="divin">type-cedit ad=nd debit and shopping</span></td>
<td>description</td>
</tr>
</table>
I have been wondering quite a long , that how the percentage width in table cells work in HTML.
Case 1: No table width specified, single row and columns are not given full space
<table>
<tr>
<td width="25%">mango</td>
<td width="25%"">apple</td>
</tr>
</table>
Case 2: No table width specified,single row and columns are given full space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
</tr>
</table>
Case 3: No table width specified,single row and columns are given more than 100% space
<table>
<tr>
<td width="50%">mango</td>
<td width="50%"">apple</td>
<td widht="100%">guava</td>
</tr>
</table>
Case 4: No table width specified, multiple rows specified and columns are giving following percentage configurations
<table>
<tr>
<td width="33%">mango</td>
<td width="33%"">apple</td>
<td widht="33%">guava</td>
</tr>
<tr>
<td width="50%">papaya</td>
<td width="50%">pomengrante</td>
</tr>
</table>
Their outputs I am not able to correlate , please help me in this
The percentage will works depending On any Screen Resolution Equal to 100% So You Divide That Percentage In To Your Requirement Measurements In Percentages Example As Given below,(In Table tr width(100%)=(Addition of td(widths))
<table style="width:100%;" border="1">
<tr>
<td wdith="50%">Mango</td>
<td wdith="50%">Lemon</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
<!--This Is Another Type Of Table-->
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="33%">Mango</td>
<td wdith="34%">Lemon</td>
<td wdith="33%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td><td>some Item</td>
</tr>
</table>
<h3>This Is Another Type Of Table</h3>
<table style="width:100%;" border="1">
<tr>
<td wdith="25%">Mango</td>
<td wdith="25%">Lemon</td>
<td wdith="25%">Something</td>
<td wdith="25%">Something</td>
</tr>
<!--You Given For 1st Record measurements Then Automatically Adjested 2nd Record Also Depend Upon 1st Record-->
<tr>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
<td>some Item</td>
</tr>
</table>
The cells will work with relation to their table, but also they need to take up 100% of the table width. So that makes your case1 not work. it will split it up as 50%. But a case where you set this will work, as it's 100% of the table width.
Demo
<table>
<tr>
<td width="20%">mango</td>
<td width="80%">apple</td>
</tr>
</table>
If you need something to take up 25-25, then maybe you should look into using divs instead.
Also your last case will not work as you need to have the same amount of cells in the table.
I have problem with texts in HTML
This is my code:
<table width="100%">
<tr>
<td align="left"><p style="font-family:arial;font-size:13px;color:white;">10000</p></td>
<td align="center"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
<td align="right"><p style="font-family:arial;font-size:13px;color:white;">100 </p></td>
</tr>
</table>
I want it, when I add any character to first TD (align left) it move second and third TD (align center and align right)
Thank for every answer Have nice day :)
Set the width so they don't resize to fit whatever content is in the cells, e.g.
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="70%">January</td>
<td width="30%">$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
http://www.w3schools.com/tags/att_td_width.asp
align=left/center/right just aligns the content of the cell.
the second and third cells move because the first becomes larger.
if you want fixed table, use width for the cells, so they dont change size.
While looking at table structure with rowspan and colspan, I stubbled upon two instances which were interesting.
View jsfiddle
The first table should have three rows, but the last row stays in the second row. While I understand that this is fixed if I change the bottom rowspan to 1, instead of 2, why doesn't it work this way?
<table border="1">
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
</tr>
<tr>
<td colspan="4">bottom</td>
</tr>
</table>
The second table should have a bottom border, but does not show one. Again, I realize the bottom row and the left box would work with a rowspan of 2 for the left side, and a rowspan of 1 for the bottom row, but I was wondering why it doesn't work the way I showed in jsfiddle.
<table border="1">
<tr>
<td rowspan="3">3</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
<td rowspan="2">2</td>
</tr>
</table>
The 1st table is malformed because all of the columns from above have rowspan > 1. The 3rd row has no columns left in which to add a cell, but you have colspan=4.
The second table is malformed because all of the columns in the second row have rowspan > 1, hence there is no final row and no bottom border.
Bit of old school one i think but wondered if anyone had a solution for it by now:
Is there a way of getting equal columns in a table without knowing the number of columns just using html/CSS?
After the cleanest method possible really.
This is my test table at the moment:
<table class="panel-form panel-form_horizontal" style="width:100%;">
<tbody>
<tr>
<td colspan="3" class="header">
<h3>fieldset 1</h3>
<menu>
<button id="">edit</button>
</menu>
</td>
</tr>
<tr>
<td><label>name</label></td>
<td><label>name</label></td>
<td><label>name</label></td>
</tr>
<tr>
<td>supplier_1</td>
<td>www.bbc.co.uk</td>
<td>0</td>
</tr>
<tr>
<td colspan="3" class="header">
<h3>fieldset 2</h3>
<menu>
<button id="">edit</button>
</menu>
</td>
</tr>
<tr>
<td><label>name</label></td>
<td><label>name</label></td>
</tr>
<tr>
<td>0</td>
<td>0</td>
</tr>
</tbody>
</table>
There is no perfect solution to your question if you don't know the number of columns.
You can try:
table {
table-layout:fixed;
}
This will force the table to use fixed, equal cells. The problem is if your content is too large for the cell size it'll cause issues with content overlap, etc.
Here's a basic sample using your markup: http://jsfiddle.net/9HC8b/. Notice when the screen width is wide enough everything looks great. If you start dragging (shrinking) the window you'll see the content blows up.