In the following code I need to match the width when shrinking the window :
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
This is just a little example of the page, it would involve more divs and tables.
When I shrink the window the table and the div shrink as need it so the div will shrink more than the table, and that make the page look ugly.
Is there any way to stop the div shrinking when table can't shrink any more?
I tried min-with and it does not work, and I asked already for anything similar but apparently there isn't anything apart of JavaScript.
Could any of you give me a solution other than JavaScript?
Thanks in advance.
Cesar.
I do not have IE7+ to test this, but in Opera it works when you put all the HTML in an outer div block. Than the outer div block is the same with as the table. So at a certain point it does not fit the browser window any more, but now the outer block has its width and in title div keeps the same width as the outer block.
<div style="background-color:red;">
<div style="background-color:blue;">The title</div>
<table>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
</div>
You can use thead and colspan to display the title inside the table:
<table>
<thead><tr style="background-color:blue;"><th colspan="4">The title</th></tr></thead>
<tbody>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</tbody>
</table>
Bonus point : your table structure now makes more sense from an accessibility point of view.
You can also use the caption element, but its formatting may be inadequate :
<table>
<caption style="background-color:blue;">The title</caption>
<tr>
<td> Column title </td>
<td>Content</td>
<td>Column title2</td>
<td>Content 2</td>
</tr>
</table>
Related
I am creating an html table using VBA and everything works fine except the table caption that gets a line break. I am trying to make it no-wrap, but it is not working, where do I make a mistake?
<Caption style="white-space: nowrap"> MyTable </Caption>
I applied the same styling to <td> tags too, but the result is the same. It seems that caption is bound to the first column's width, how can I make caption to be shown in one line only regardless of the columns width?
Try to use the CSS property white-space: nowrap; and overflow: hidden; in your style attribute. Run the snippet below to sure what it's working.
<table>
<caption style="white-space: nowrap; overflow: hidden;">This is very very very long caption. The text is never wrap to the next line. The text continues on the same line until a <br> tag is encountered.</caption>
<thead>
<tr>
<td>col 1</td>
<td>col 2</td>
</tr>
</thead>
<tbody>
<tr>
<td>11</td>
<td>12</td>
</tr>
<tr>
<td>21</td>
<td>22</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
</tr>
</tbody>
</table>
I am trying my hand at making a website for my small start up. Now the thing is that I want to make a central area where the background color is white and one where the background color is light grey. I made a table with the background color white and aligned it in the center, but it just appears at the bottom of the page. What is happening?
<html>
<head>
<title>Memocups</title>
</head>
<body bgcolor="#d9d9d9">
<table align="center" width="50%" bgcolor="#ffffff">
<tr>
<p><h1>Memocups</h1><p>
<p><h3>What is a memocup?<h3><p>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>
A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</tr>
</table>
</body>
</html>
Simple table with three columns and two rows.
<table border=1>
<tr>
<td>cell 1<td>
<td>cell 2</td>
<td>cell 3</td>
</tr>
<tr>
<td>cell 4<td>
<td>cell 5</td>
<td>cell 6</td>
</tr>
</table>
Here is how the table should be formatted:
<table width="50%" style="background-color:#fff;margin:0 auto;">
<tr>
<td>
<h1>Memocups</h1>
<h3>What is a memocup?</h3>
<img src="images/img_1_cuponstump.jpg" width="540px" height="360px">
<p>A memocups is a coffe mug wich has a customizable picture!<br> What makes memocups unique from all other mugs with pictures is <br>that you upload the picture you want to our website and we<br> will put it on the mug! So what are you waiting for the<br>perfect gift is only a few clicks away!</p>
</td>
</tr>
</table>
I removed the p tags that you had around your headings as they are not necessary. Also note that bgcolor and align are deprecated and you should be using background-color and margin/float CSS instead. Also corrected an unclosed h3 tag and added the td(table cell).
That said, a table is not the correct element to use for this data. You should be using divs.
Having an issue with table CSS where the height of a table nested inside of a TD is not adjusting it's height when a TD in the same TR has it's height overflow (and it must be able to do so).
I have a table layout that looks roughly like this, and there is a min-width property on the TDs:
<table>
<tr>
<td id="TableCellA">Customer Admin User Account</td>
<td>
<table>
<tbody>
<tr>
<td>Content A</td>
<td>Content B</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
A visual example of what happens is here:
I want the borders on the TDs to adjust height when the height of TableCellA changes. Any suggestions on how to achieve that accepted!
I have a table which has a caption which appears on top of the table.
I'd need another caption to appear at the bottom of the table. how would it be possible?
<table>
<caption>My Table - Start</caption>
<tbody></tbody>
<tfooter></tfooter>
<caption>My Table - End</caption>
</table>
You should put the <caption> at the top of the table, right below the <table> tag. Then you can use the CSS:
caption {
caption-side: bottom;
}
to get it below the table. And only one caption per table as a previous person wrote. If you need a table title, then either use <th> or put a heading outside the table and use CSS to position it correctly.
You could mock one by doing the following, and applying some CSS
<table>
<caption class="cap">some caption text</caption>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td>cell 1</td><td>cell 2</td><td>cell3</td>
</tr>
<tr>
<td colspan="3" class="cap foot">
This is pretty much a footer caption.
</td>
</tr>
</table>
Here's an example
I believe you can only have 1 caption per table and it must appear after the table tag.
You could add a div right after the table and put your caption there.
How to set position inside a table? I have table inside which I have span and certain links. I made <td> as center alignment and span texts starting from center, but when I do the same for all links <td> everything is displayed in center if it own. But I need to start all text at the same position. How to do this?
What i understand is that you want to align the text.
Try this way, also try to be more exact and send us a copy of your code.
But from what i understood try out this.
div style="text-align: center;">
<table style="margin: 0px auto;" border="0">
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
<tr>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>