When using colspan on a cell, cell takes width of cell above instead of entire row when in Chrome. Works fine in IE. Even putting 100% width on cell doesn't change anything.
<table cellspacing="1px" cellpadding="0" border="0" id="shiftData">
<tr>
<td class="topRow">Employee</td>
<td class="topRow">Working For</td>
<td class="topRow">Shift</td>
<td class="topRow">Date</td>
<td class="topRow">Time</td>
</tr>
<tr>
<td>Audrey W</td>
<td>Justin B</td>
<td>Host</td>
<td>6/14/12</td>
<td>4:00pm</td>
</tr>
<tr><td colspan="5" align="right" class="buttonRow"><a class="approve" href="">Approve</a><a class="deny" href="">Deny</a></td></tr>
<tr>
<td>Justing B</td>
<td>Leigh Anne</td>
<td>Dishwasher</td>
<td>6/16/12</td>
<td>11:00am</td>
</tr>
</table>
I had a float: right; on the cell div that was apparently causing the issue in Chrome.
Related
I'm totally stuck trying to figure out why setting a td width attribute in the following table is throwing off the display.
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
The above is rendered with the word "Invested" outside of the table entirely (see screenshot).
Any thoughts on why this might be happening? Thanks in advance!
<table style="width:100%;">
<tbody>
<tr>
<td colspan="4">
<big><big><b>Investments By Bruce Wayne</b></big></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
</tr>
</tbody>
</table>
Problem:
All you have to do is to format your code. There is a NON-BREAKING-SPACE between td and style <td style (the one with the Investment text) that destroys the layout. To reproduce you can delete the whitespace and add the whitespace again.
Note:
You have to <big><big> there wrapped - this can be reduced to just one element.
<table style="width:100%">
<tbody>
<tr>
<td colspan="4">
<big><b>Investments By Bruce Wayne</b></big>
</td>
</tr>
<tr>
<td style="width:20%;"><b><u>Date</u></b></td>
<td style="width:20%;"><b><u>Invested</u></b></td>
<td style="width:30%;"><b><u>Company (and Round)</u></b></td>
<td style="width:30%;"><b><u>SPV</u></b></td>
</tr>
</tbody>
</table>
So I am trying to split cells in a table using colspan but I am seeing some odd behavior. In the code bellow the first table does not render as expected.
In particular the row with the 1/4 and 1/2 column are not spanning to 2x25% occupancy and then one that uses the remainder space, and this messes up the proper spanning of the 1/3 cells and 1/2 cells... On the other the second table looks as expected.
I am not sure if this is a bug in Chrome?? it seems to have also hill behavior in IE9, am i missing something here? Is there a better method to get this done?
You can see live version of code at: https://jsfiddle.net/4xwm33n6/
Unexpected alignment:
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="50%" align="center">1/2</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
This works (but two 1/4 cannot be merged as one):
<table border="1" align="center" cellspacing="0" width="400px">
<tr >
<td colspan="100%" align="center">1/1</td>
</tr>
<tr>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
<td colspan="33.33%" align="center">1/3</td>
</tr>
<tr>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
<td colspan="25%" align="center">1/4</td>
</tr>
<tr>
<td colspan="50%" align="center">1/2</td>
<td colspan="50%" align="center">1/2</td>
</tr>
</table>
To do what you want to do you need something along the lines of:
<table>
<tr>
<td colspan="12">1/1</td>
</tr>
<tr>
<td colspan="6">1/2</td>
<td colspan="6">1/2</td>
</tr>
<tr>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
<td colspan="4">1/3</td>
</tr>
<tr>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
<td colspan="3">1/4</td>
</tr>
</table>
This way you can combine the number of cells you need. By the way I got the 12 by using the lowest common multiple of 4 and 3...
Sorry for wrote comment like answer, I can't comment this post :(
colspan mean how many cells You want to merge, not width. You can't set width in colspan.
You should use colspan="#" using a number not a percent.
For example, if you want a td to go across two columns, use colspan="2"
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td colspan="2">4</td>
<td>5</td>
</tr>
</table>
https://jsfiddle.net/xxurc50n/1/
<html>
<body>
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" height="100%">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
</body>
</html>
How do I get the column to be 100% of the table height but the other columns must keep their height?
Because I want to put a widget in there but I have to work in my boss his cms and I am not allowed to make new divs :(
Try rowspan:
<table align="left" border="0" cellpadding="1" cellspacing="1" style="width: 1000px;">
<tbody>
<tr>
<td width="300">Hanrathsingel 14</td>
<td width="300">Home</td>
<td width="400" rowspan="5">This one has to take the full height of the table</td>
</tr>
<tr>
<td width="300">1252 AE Laren</td>
<td width="300">Wie zijn wij</td>
</tr>
<tr>
<td width="300">T. 035-6231419</td>
<td width="300">Informatie</td>
</tr>
<tr>
<td width="300">M. 06-21700357</td>
<td width="300">Algemene Voorwaarden</td>
</tr>
<tr>
<td width="300">laren#qualitysites4all.com</td>
<td width="300">Contact</td>
</tr>
</tbody>
</table>
Example
JSFiddle Example
Use rowspan="5" in that TD.
Rowspan attribute, tells your element to "get the height" of 5 rows in this case.
If you have dinamic content remember to update this value to the actual number of rows of your table.
I am new to HTML and CSS designs. I have the below code.
<html>
<body>
<table width="100%">
<tr>
<td width="25%"> </td>
<td width="25%"></td>
<td width="25%"></td>
<td width="25%"></td>
</tr>
<tr>
<td >wqewqehkjfoiw</td>
<td >abcdefdsfds</td>
<td >sdfdsfdsfdsf</td>
<td >dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The first and second rows have 4 tds of equal width. Now on third row, i wanted to have 3tds with equal width. But it is not working with the above code. Pls help
You should consider using a grid system (like http://960.gs/) instead of tables.
If you still want to use tables, use the colspan attribute:
<html>
<body>
<table width="100%">
<tr>
<td colspan="3" width="25%"> </td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
<td colspan="3" width="25%"></td>
</tr>
<tr>
<td colspan="4" width="33%">wqewqehkjfoiw</td>
<td colspan="4" width="33%">>abcdefdsfds</td>
<td colspan="4" width="33%">>sdfdsfdsfdsf</td>
</tr>
</table>
</body>
</html>
The table above has 12 columns, so for N tds, use colspan="12/N".
<table width="100%" border="5">
<tr>
<td colspan="25%"> </td>
<td colspan="25%"></td>
<td colspan="25%"></td>
<td colspan="25%"></td>
</tr>
<tr>
<td colspan="25%">wqewqehkjfoiw</td>
<td colspan="25%">abcdefdsfds</td>
<td colspan="25%">sdfdsfdsfdsf</td>
<td colspan="25%">dsfsdfdsfdsfsdweqw</td>
</tr>
<tr>
<td colspan="34%">wqewqehkjfoiw</td>
<td colspan="33%">abcdefdsfds</td>
<td colspan="33%">sdfdsfdsfdsf</td>
</tr>
</table>
The way you tried won’t work because it does not correspond to the HTML table model, or any logical table structure. What browsers do in practice is (as you probably noticed) that they treat the row with three cells as if it had a fourth, empty cell. And then they more or less ignore the conflicting width settings.
Among the possible workarounds, the cleanest (and most common) is probably the use of nested tables. You would replace the last row cells by a single cell that spans all the four columns and contains an inner one-row table. The last row could thus be:
<tr>
<td colspan=4>
<table width=100%>
<tr>
<td width="34%">wqewqehkjfoiw</td>
<td width="33%">abcdefdsfds</td>
<td width="33%">sdfdsfdsfdsf</td>
</tr>
</table>
</td>
</tr>
I'm trying to make a table in html, using fixed sizes and column spanning.
Here is the code I am working with:
<table style="width:602px;" border="1" cellspacing="0">
<tr>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2">content</td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
<tr>
<td style="height:148px; width:148px;"></td>
<td style="height:148px; width:298px;" colspan="2"></td>
<td style="height:148px; width:148px;"></td>
</tr>
</table>
This works as I expect on chrome (creating 2 double length cells in the first row, and then three rows of single-double-single length cells). However, in IE8 the middle cell in the bottom 3 cells is sized to fit the "content", not to the size I defined.
Am I doing something wrong, and how should I change this to make it work as I want? Is there a better way to do what I'm trying to do?
Remove your table width, and you'll see how your table behave...
Yes, all your columns are trying to be 298px wide. This is because a table try to fit its column width with its first row... Remove the useless declaration and try this :
<table border="1" cellspacing="0">
<tr>
<td style="height:148px;" colspan="2">1fdasfsdafsdfas</td>
<td colspan="2">1</td>
</tr>
<tr>
<td style="height:148px; width:148px;">1</td>
<td style="width:298px;" colspan="2">1</td>
<td style="width:148px;">1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
<tr>
<td style="height:148px;">1</td>
<td colspan="2">1</td>
<td>1</td>
</tr>
</table>