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>
Related
I want to make first td tag bold and I want apply this for entire table.
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
Yes you can do that, by using the css propretiy font-weight.
Check this example => https://jsfiddle.net/wcx4Lej1/5/
<table>
<tr>
<td>Cell A</td>
<td>Cell B</td>
</tr>
</table>
td:first-child {
font-weight: bold;
}
And if you want to apply this to the entire table you just need to select the tr tag on css and set the font-weight to bold.
I managed to get the scrollable table working (table as a whole), but now I want to make it a fixed size and scroll only within the table rows.
Lets say I have a normal table of a width 100.
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
This will work fine, how ever if the value inside of <td> is really long
<td>LongLongLongLongLongLongLongLong</td>
the table width will be increased to accommodate that long <td>
What I am trying to accomplish is to make the <tr> scrollable.
So if the <td> within the <tr> is really long one, the <tr> should become scrollable, instead of increasing the whole table width.
I got some partial solution by making the td scrollable. But I want to make tr scrollable instead of td
<table width="100">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td width="50">
<div style="width: 50px; overflow: auto">
JanuaryJanuaryJanuaryJanuaryJanuary
</div>
</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
Creating a scroll element on an <html> block is pretty simple. try adding the following to the <tr>
(CSS)
tr {
overflow: scroll;
}
to create a better view in your <td> elements you could add:
(CSS)
td {
word-break: break-word;
}
Hope this helps!
I have a HTML table as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
When you run this you'll see the second row is collapsed, but I'd rather it was rendered uncollapsed, with the same height as the first row. One way of doing this is to put a entity, as follows:
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td> </td><!-- Empty row -->
</tr>
</table>
Is there a way I can achieve the second result, via CSS, using the HTML from the first snippet?
You can use this code:
td:empty::after{
content: "\00a0";
}
It adds escaped after every originally empty td, solving your issue.
td:empty::after{
content: "\00a0";
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>asd</td>
</tr>
<tr>
<td>dees</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
</table>
Learn more about escaping HTML entities here.
You can add height to table-cell, in this case it'll work like min-height property for other elements (with display: block, display: inline-block, etc). I added another table row with long text to demonstrate it:
td {
height: 22px;
}
<table border="1">
<tr>
<td>Row with text</td>
</tr>
<tr>
<td></td><!-- Empty row -->
</tr>
<tr>
<td>Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words, Very-very long text with many words</td>
</tr>
</table>
You can't use min-height property, because the specification says:
In CSS 2.1, the effect of 'min-height' and 'max-height' on tables, inline tables, table cells, table rows, and row groups is undefined.
Try adding to your table CSS formatting like
table.someclass tbody td {
white-space:nowrap;
min-width:30px;
vertical-align:top;
}
This will make all empty cells equal and at least 30px wide.
Things like , nowrap and CSS content appending like content: "\00a0"; didn't work for me.
i was trying to put table inside a table like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</tr>
</table>
the reason i want to do this is to set the second table a height
and than overflow:auto so the second table have a scroll bar to scroll down
is that possible , and it it does , how?
You still need a <td>/<th> within a <tr> tag, so add either of those between your <tr> & nested <table> (and probably apply colspan="2")
Also, off the top of my head I'm not sure if the <td>/<th> supports an overflow with scrolling, but if not you can always wrap the nested <table> in a <div> and style it.
<table> isn't valid inside <tr>. Put it inside a <td> inside a <tr> instead.
Like this:
<table>
<tr>
<td>Filename</td>
<td>Size</td>
</tr>
<tr>
<td> <!-- ** add this ** -->
<table>
<tr>
<td>my cool file name</td>
<td>654 KB</td>
</tr>
</table>
</td> <!-- ** add this ** -->
</tr>
</table>
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>