In my example jsfiddle I have two HTML tables. They are basically the same - same class, same content, everything. The only difference is the order of rows.
<style>
.tbl-lay-fixed {table-layout:fixed}
</style>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
</table>
<table class="tbl-lay-fixed" border="1" width="100%">
<tr>
<td colspan="2" width="100%">xxxx</td>
</tr>
<tr>
<td width="5%">xxxx</td>
<td width="95%">yyyyyyyyyy</td>
</tr>
</table>
Table number 1 is displayed correctly - width of the cells is correct.
Table number 2 is displayed incorrectly - second row have two columns with witdh set as 5% and 95% accordingly, but instead it is displayed as 50% 50%.
Where is the problem? It is the same in all browsers.
This seems to work in Firefox at least
(changing bottom TD colspan to 20)
just remove "width="100%" <table class="tbl-lay-fixed" border="1" width="100%"> from the table class
Related
I'm not new to HTML but haven't touched it for some good time and I've encountered an annoying problem.
I have a table with two rows.
I want the first row to have one column - means that it will span the entire row, and I want the second row to have three columns, each one 33.3% of the row's width.
I have this code for the table :
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
But what happens is weird, the first row has one column with the same size as the second row's first column, and whenever I change one of them, it changes the other one too.
If I give the first row's <td> the width value of 500px lets say, it sets the second row's first <td> to the same size.
What am I doing wrong ?
You should use the colspan attribute on the first row's td.
Colspan="3" will set the cell to flow over 3 columns.
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center">check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
You want to use the colspan attribute like this:
<table width="900px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" colspan="3">check</td>
</tr>
<tr>
<td align="center" >check</td>
<td align="center">check</td>
<td align="center">check</td>
</tr>
</table>
If you're using JSX (React) it should be written like this. The s in colspan is capitalized and the value is a number instead of a string.
<td colSpan={3}>Text</td>
You can use colspan
<td align="center" colspan="3">check</td>
http://www.w3schools.com/tags/att_td_colspan.asp
Using colspan like this:
<tr>
<td align="center" colspan="3">check</td>
</tr>
By colspan you merge the following cells in a row to one. If you use 2 in your sample you get one cell with a width of the first two columns and the third is as the third in the rest of the table.
alter the first row with the below
<tr>
<td colspan="3" align="center">check</td>
</tr>
Is it possible to make a table with lets say 4 columns with of 1 row with 100px in width, and then have to cells below with a with of 200px without having to create a new table?
Because if i do this, then when i set the width of 200px in new cells, the other cell changes width too.. i want the to new cells to expand to fill up the rest of the width left.
Here an example..
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td width="200px">5</td>
<td width="200px">6</td>
</tr>
</table>
JsFiddle demo
you actally need to use colspan, so you code will be as below this will do the work you want
<table border="1" width="100%">
<tr>
<td width="100px">1</td>
<td width="100px">2</td>
<td width="100px">3</td>
<td width="100px">4</td>
</tr>
<tr>
<td colspan="2">5</td>
<td colspan="2">6</td>
</tr>
</table>
<td colspan="number"> -number Specifies the number of columns a cell should span. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup)
Try removing the cell width from the second row, but add an additional attribute to each of them, so it reads like:
<td colspan="2"></td>
<td colspan="2"></td>
This should have both these cells account for 2 cells widths, without the need to redefine their widths.
MDN TD - Attribute Colspan
I'm facing problem with table in html,
actually I fixed the width,and want to increase the td height as per the content in it,
for example : if td width is 30px and when data inside td crosses the td width i want to show remaining data in next line and so on..
table:
<table width="100%" border="1" >
<tr>
<td align="left" width="30px">
laaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa text
</td>
<td align="left" width="30px">
text
</td>
</tr>
</table>
Here is the solution to your problem! The width of the columns are equal in this case, though they can be changed, not to mention.
<table border="1" width="100%" style="table-layout:fixed">
<tr>
<td style="word-wrap:break-word">Hellohellohellohellohellohellohellohellohellohellohello
<td>text</td>
</tr>
</table>
And here is the demo http://jsbin.com/ihaxob/2/edit ..
I have seen the solution from this thread!
Word-wrap in an HTML table
I have a table which has a inner table. I don't want to set the table's width, but the td's width:
<table border="1">
<tr>
<td width="200">left menus (200px)</td>
<td>
<table border="1" class="table-fixed" style="background-color:#ddd" >
<tr>
<td width="2000">2000px</td>
<td width="2000">2000px</td>
</tr>
</table>
</td>
</tr>
</table>
You can see the inner table has two tds, the total width is 4000, which is wider than the browser.
But in the browser, the table is automatically shrank to fit the browser. How to let the table displays by it's actual width ( 200+2000+2000 here ).
If I set the table's width as:
<table width="4200">
...
<table width="4000">
...
</table>
It will be displayed as I expected, but I don't want to. Since the columns of inner table are dynamic, I don't get the total width before running.
You can use CSS min-width to force that.
http://jsfiddle.net/kM6DQ/
<table border="1">
<tr>
<td width="200">left menus (200px)</td>
<td>
<table border="1" class="table-fixed" style="background-color:#ddd" >
<tr>
<td class="wide">2000px</td>
<td class="wide">2000px</td>
</tr>
</table>
</td>
</tr>
</table>
<style>
td.wide { width:2000px; min-width:2000px; }
</style>
<table width="100%" border="0">
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="120">Banner Image</td>
</tr>
<tr>
<td width="400" colspan="80"></td>
<td width="10" colspan="2" bgcolor="yellow"></td>
<td width="190" colspan="38"></td>
</tr>
</table>
</table>
The alignment is messed up for the 2nd row. How can it be resolved?
Looks like there are a lot of issues here.
First off, this isn't valid html. The second table tag can't go where you have it. You need to do something like:
<table width="100%" border="0">
<tr><td>
<table width="600" align="center" bgcolor="#ffffff">
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</table>
</td></tr>
</table>
Which will probably solve your immediate problem. However, why on earth do you have 120 columns? That seems wrong by any standard.
Note I removed the colspan because it's use here seemed very inappropriate.
Also, you might ask yourself why you have the outer table tag anyway. It's not exactly doing anything for you that can't be done in a better manner.
Colspan is used to indicate how many COLumns a single column SPANs, not to indicate a pixel width, as it would appear that you are trying to do here.
Instead, use colspan to indicate how many columns a single column should span, and indicate the width of columns either using css styles or the "width" atttribute.
See this example:
http://jsfiddle.net/xixionia/yt3gf/
The second table should be better if you placed it inside a td on the first table. Then on the second table there's a lot of colspan.
<div>
<table>
<tbody>
<tr>
<td width="600" colspan="3">Banner Image</td>
</tr>
<tr>
<td width="400"></td>
<td width="10" bgcolor="yellow"></td>
<td width="190"></td>
</tr>
</tbody>
</table>
</div>
I do prefer to use div in place of table. But you still have a choice. As you can refer to the other post.
You would try:
<table width="100%" >
<table align="center" bgcolor="#ffffff" cellspacing="0" cellpadding="0" border="1">
<tr>
<td colspan="120">Banner Image</td>
</tr>
<tr>
<td style="width:400px;" colspan="80">a</td>
<td style="width:10px;" colspan="2" bgcolor="yellow">b</td>
<td style="width:190px;" colspan="38">c</td> </tr>
</table>
</table>
I add "border=1" and text in the cells in order to see the changes.
You got a table inside a table directly and thats not "valid".
Considering:
I want the banner to stretch across the table. The second row should be in proportion of width 400, 10 for the separator and 190
You should have:
<table style="width:100%; background-color: #fff;">
<tr>
<td colspan="3">Banner Image</td>
</tr>
<tr>
<td style="width: 66.6%"></td>
<td style="width: 1.6%; background-color: yellow;"></td>
<td style="width: 31.6%"></td>
</tr>
</table>
You are clearly trying to use tables to make layout wireframes. You should research more about CSS and html5.
This answer will probably fix your code but not the logic you are trying to apply.