I had to make a website with mostly tables (very old website) a little bit responsive. I've made all my changes and always tested them with Firefox Dev Edition and the Responsive Design View functionality in it.
Now this looks fine in Firefox Dev Edition (and standard Firefox) but in Chrome and other browsers it shows a little different.
This is how it looks in Firefox Dev Edition:
This is how it looks in Chrome:
As you can see my table shows a little different. This is the HTML of a part of my table (table header and first row):
<table class="FontNormal">
<tbody>
<tr>
<td colspan="4" align="right">
New topic
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr class="TableHeader" valign="top">
<td width="500">Topic</td>
<td width="150">
<font color="black">Last Post</font> <img src="../images/sortdesc.gif">
</td>
<td>Product</td>
<td>Group</td>
</tr>
<tr>
<td style="max-width: 462px;">
Baxter - Black Piping (0)
</td>
<td style="max-width: 462px;">
14/02/2015 00:29:02
</td>
<td style="max-width: 462px;">
Pharma
</td>
<td style="max-width: 462px;">
BDT Industry
</td>
<td style="max-width: 462px;">
Delete
</td>
</tr>
</tbody>
</table>
I don't have a reset.css . Is there a way I can fix this quickly without a lot extra programming to do?
You have differing numbers of columns in each row. Ensure the number of columns is consistent and the browsers will be. I think what your seeing is the different handling between Chrome and Firefox for when the number of columns in each row does not match.
<table class="FontNormal">
<tbody>
<tr>
<td colspan="5" align="right">
New topic
</td>
</tr>
<tr>
<td colspan="5"> </td>
</tr>
<tr class="TableHeader" valign="top">
<td width="500">Topic</td>
<td width="150" colspan="2">
<font color="black">Last Post</font> <img src="../images/sortdesc.gif">
</td>
<td>Product</td>
<td>Group</td>
</tr>
<tr>
<td style="max-width: 462px;">
Baxter - Black Piping (0)
</td>
<td style="max-width: 462px;">
14/02/2015 00:29:02
</td>
<td style="max-width: 462px;">
Pharma
</td>
<td style="max-width: 462px;">
BDT Industry
</td>
<td style="max-width: 462px;">
Delete
</td>
</tr>
</tbody>
The colspan attribute will makes one cell span X columns so if used as above they will always equal 5.
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>
This sounds very similar to previous questions, but I've not found something that matches what I'm trying to do here.
My current code (very verbose with everything in line) looks like this:
td { border: 1px solid black }
<table style="table-layout:fixed">
<tr>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
<td>
<table style="table-layout:fixed">
<tr>
<td style="background-color:red"></td>
<td style="background-color:limegreen;width:30px"></td>
<td style="background-color:blue"></td>
<tr>
</table>
</td>
</tr>
<tr>
<td style="width:25%;text-align:center">Some text here</td>
<td style="width:25%;text-align:center">More text</td>
<td style="width:25%;text-align:center">Hi</td>
<td style="width:25%;text-align:center">Somewhat longer text</td>
</tr>
</table>
What I'm trying to accomplish should look like this:
That is, the four main columns should all be the same width, which is the width of the largest content of any of the columns.
The green columns should always be 30px, and the red and blue columns should fill the remaining space each side of that middle column, only up to the width available in the auto-sized outer column.
Setting the internal tables to 100% width makes this happen, but of course the outer table then takes up the entire page width.
I'm also aware that using tables for this is probably not a great idea now we can use CSS, but I'd like to get this example working in tables before 'translating' it.
I'm very opposed to using JavaScript to solve this, for the record!
Edit: I also tried putting all 'subcolumns' in one row, and setting the text to colspan three at a time, with the 25% then applied to that. This ended up confusing the engine, and the width ended up about 75% of the page.
<table style="table-layout:fixed" border="1">
<tr style="font-size: 1px;">
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
<td width="25%" colspan="3"> </td>
</tr>
<tr style="font-size: 6px;">
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
<td style="background-color:red"> </td>
<td style="background-color:green"><div style="width: 30px;"> </div></td>
<td style="background-color:blue"> </td>
</tr>
<tr>
<td colspan="3" style="text-align:center">Some text here</td>
<td colspan="3" style="text-align:center">More text</td>
<td colspan="3" style="text-align:center">Hi</td>
<td colspan="3" style="text-align:center">Somewhat longer text</td>
</tr>
</table>
this might solve your answer, your previous code html elements are not properly closed look on that also.
My question is that how can I make a row with different columns quantity ?
For example I want to have 2 columns in last row in this picture (the portion of each cell must be 50%).
Another question that I have is that how can I make text starts from first line in a cell (center cell , in this picture) ?
My code is :
table {
border: 1px solid black;
border-collapse: collapse;
border-spacing: 5px;
}
th,
td {
padding: 10px;
}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022" height="20px" align="left">
<td colspan="3">
home products contact us
</td>
</tr>
<tr>
<td width="25%">last post</td>
<td rowspan="2" width="50%">hello my name is mohammad ghorbani and i am studying computer enginerring in arak</td>
<td>our friends</td>
</tr>
<tr>
<td>our statics</td>
<td>24</td>
</tr>
<tr>
<td>our social pages</td>
<td>about us</td>
</tr>
</table>
There's two primary answer categories to your question.
First, the direct answer. Think of your page as a grid. You want enough squares on the grid to be divisible by both 3 and 2. Say, 6. Then use colspan to set each column to the number of grid columns that would be needed -- so, colspan=2 for 3 columns, and colspan=3 for 2 columns.
<table border=1>
<tr>
<td colspan=6>My Website</td>
</tr>
<tr>
<td colspan=6>home, products, contact us</td>
</tr>
<tr>
<td colspan=2 style="width:33%">last post</td>
<td colspan=2 rowspan=2 style="width:33%">hello my name</td>
<td colspan=2 style="width:33%">our friends</td>
</tr>
<tr>
<td colspan=2 style="width:33%">our statics</td>
<td colspan=2 style="width:33%">24</td>
</tr>
<tr>
<td colspan=3 style="width:50%">our social pages</td>
<td colspan=3 style="width:50%">about us</td>
</tr>
</table>
The other answer category is that you should avoid using tables for your layout structure. There's a LOT of Google results for this one, and it's very opinion based, so I'll just say that generally tables should be used for data, css for layouts, and using tables for layouts may be quicker but it's less flexible.
Try this, its working well, hope it will resolve your issue.
Add this class
.column{display:inline-block; width:49%;}
<table style="width:100%" border="1px" cellpadding="5" cellspacing="5" bordercolor="green" bgcolor="yellow" height="500px">
<caption>web design homework</caption>
<tr>
<th colspan="3">My Website</th>
</tr>
<tr bgcolor="#77E022"
height="20px" align="left" >
<td colspan="3" >
home products contact us
</td>
</tr>
<tr>
<td width="25%"> last post </td>
<td valign="top" rowspan="2" width="50%"> hello my name is mohammad ghorbani and i am studying computer enginerring in arak </td>
<td> our friends </td>
</tr>
<tr>
<td> our statics </td>
<td> 24 </td>
</tr>
<tr>
<td colspan="3" valign="top">
<div class="column"> our social pages</div>
<div class="column"> about us </div>
</td>
</tr>
</table>
Any help would be much appreciated with the coding on a table of info. The table works great in Chrome and Firefox but NOT in IE8. I have tried various but with no luck. The person who I am doing it wants it as in Chrome/Firefox look, nothing else.
The two rows up from the bottom have different width than the columns above. As in chrome / Firefox. Just need it get it to show the same in IE8. IE8 displays them all in the same width?!
<table width="669" border="1" align="center" cellpadding="5" cellspacing="0">
<tr>
<td width="56" rowspan="18" bgcolor="#E6E6E6" >
<p align="center">
<img src="images/awards.gif" alt="Awards" width="22" height="109" align="absmiddle" /></p></td>
<td width="66" height="44" ><strong>Category</strong></td>
<td ><div align="center">Awards</div></td>
<td colspan="2"><div align="center">Value</div></td>
</tr>
<tr>
<td width="66" rowspan="4" valign="top"><div align="right"><strong>MAIN</strong></div></td>
<td width="154" >1st prize and the title <br />
of the Young Pianist<br />
of the North</td>
<td colspan="2" valign="top" class="style3" >£600.00</td>
</tr>
<tr>
<td width="154" >2nd prize</td>
<td colspan="2" class="style3">£400.00</td>
</tr>
<tr>
<td width="154" >3rd prize</td>
<td colspan="2" valign="top"><span class="style3">£200.00</span> in total value<br />
(<span class="style3">£100.00</span> and WUe* worth <span class="style3">£100.00</span> or more)</td>
</tr>
<tr>
<td width="154" height="26" >Up to 3 Diplomas</td>
<td colspan="2" ><div align="center">-</div></td>
</tr>
<tr>
<td height="16" colspan="4" bgcolor="#E6E6E6"></td>
</tr>
<tr>
The link with HTML table code is here
Post your full code in jsfiddle, your question was unclear.
what i can read from your question is, you have alignment issues in width of row? If so try adding this compatible meta header for Internet explorer
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
Refer this link
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>