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!
Related
I'm currently working on a HTML template and Outlook has been a pain in the neck. I have a row with 2 td in which they have separate contents. Is there a supported way to set the height to be equal? Currently I have set a fixed height on the td but if I scale down to mobile version on Outlook. The text would wrap to the next line and cause the height to expand causing the 2 td to have different height.
<table>
<tr>
<td>
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td>
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
From the code above you can see that the first column would have a bigger height compared to the second column. How can I set the height to be equal without defining a specific height for it?. I have tried media queries however it is not supported on Outlook mobile.
Try This.....
<style>
table, th, td {
border: 1px solid black;
height:100px;
width:500px;
text-align:center;
}
</style>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
<th>Footer</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td>Result</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
<td>Total Result</td>
</tr>
</tfoot>
</table>
I hope you find your answer.
If I understand your issue correct, then the two td's do have same height, you just want to align top content? The height is determined by the highest element in the . Its not possible to do width css and dynamic height. Either you set a fixed, or you let the heights height rull.
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<h3>Content............</h3>
<h3>Content.........</h3>
<h3>Content........</h3>
<h3>Content.......</h3>
</td>
<td valign="top">
<h3>Content</h3>
<h3>Content</h3>
</td>
</tr>
</table>
What is the best way - if there is any at all, without using js - to force all td that belong to one col to obtain properties that are specified in the col?
A simple
<col style='text-align:right' />
does not seem to have any impact on the underlying table cells content.
Using css and nth-child(column-index)
table tbody td:nth-child(2){
text-align: right;
}
<table border=1>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
Use style="float: right;" in the tag which you want to align the right side.
I am trying to create a html table and encounter an issue here.
I was hoping to specify one particular row to have no padding with CSS.
html
<table cellpadding="10" cellspacing="5">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>March</td>
<td>$810</td>
</tr>
</table>
css
table, th, td {
border:solid 1px red;
}
table {
border-collapse: inherit;
border-spacing: 5px;
}
http://jsfiddle.net/3rL9dryp/1/
In jsFiddle, all rows in table has padding to upper rows. I want to keep the padding for each row but need to remove top padding to upper row for a single row (for example, third row). Is this doable?
Thanks a lot!
Here's an example of the code working. I added padding-top:100px to emphasize the difference.
http://jsfiddle.net/m704mxz6/1/
Change it to padding-top:0px; to achieve your goal.
You can use the CSS3 pseudo-selector :nth-child:
table tr:nth-child(3) td {
padding-top: 0;
}
I have the following code :
<table>
<tr>
<td>
<!-- Black Box -->
</td>
<td>
<!-- Search Box -->
</td>
</tr>
<tr>
<td rowspan='2'>
<table>
<tr><td class='thead'>Statut</td></tr>
<tr><td><!-- THE TD TO RESIZE --></td></tr>
</table>
</td>
<td>
<table>
<tr><td class='thead'>Annonce</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr><td class='thead'>Message</td></tr>
<tr><td><!-- Don't Care --></td></tr>
</table>
</td>
</tr>
</table>
It renders like this: http://imageshack.us/a/img689/3140/tbi4.png
But I would like the orange cell under "Statut" to fill the whole height of the containing TD. I tried to apply a height property to the table, the TR and the TD, but nothing happens, be it in HTML with height=... or in CSS with style='height: ...
Here's the render I'd like to have: http://imageshack.us/a/img560/3809/dy4w.png
One could argue that tables are not the best choice here, as they should only be used for tabular data, not for layout.
However, if you decide to go with tables, you should not nest them, but work with rowspan to achieve the deisred result. The HTML would look like this:
<table>
<tr>
<td>
<!-- Black Box -->noir</td>
<td>
<!-- Search Box -->cherche</td>
</tr>
<tr>
<td class='titre'>Statut</td>
<td class='titre'>Annonce</td>
</tr>
<tr>
<td rowspan='3'>lorem ipsum statut</td>
<td>lorem ipsum annonce</td>
</tr>
<tr>
<td class='titre'>Message</td>
</tr>
<tr>
<td>lorem ipsum message</td>
</tr>
</table>
This way you do not need to bother with heights in css (which can be a pain).
I set up a small example to demonstrate: http://jsfiddle.net/qJQdj/
Try height:100%; to make it takes the total height.
Employing min-height will do the trick for you here if you are content aware of the table.
CSS
td[rowspan="2"] > table{
min-height:80px;
}
http://jsfiddle.net/LWxK4/
changed code : convert your code to:
<table>
<tr >
<td class='thead' rowspan='2'>Statut</td>
<td class='thead'>Message</td>
</tr>
<tr><td class='thead'>Message</td></tr>
</table>
it will give you what u want for sure
EDIT: this is the concept of using rowspan.now you should use it to build your own webpage.there are few more cells as well in your code.you can do that using nested tables.my answer shows how to use rowspan properly
If you really wanted nested tables...
You can force a nested table/table-cell to have a minimum height as follows:
Add a class .statut-panel to your inner table:
<table class="wrap">
<tr>
<td>Black Box</td>
<td>Search Box</td>
</tr>
<tr>
<td rowspan='2'>
<table class="statut-panel">
<tr>
<td class='thead'>Statut</td>
</tr>
<tr class="full-size">
<td>THE TD TO RESIZE...</td>
</tr>
</table>
</td>
<td>
<table class="annonce-panel">
<tr>
<td class='thead'>Annonce</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table>
<tr>
<td class='thead'>Message</td>
</tr>
<tr>
<td>Don't Care</td>
</tr>
</table>
</td>
</tr>
</table>
and apply the following CSS:
table td {
background-color: lightgray;
vertical-align: top;
}
table.statut-panel {
border: 1px solid blue;
height: 200px;
}
table.statut-panel .full-size td {
border: 1px dotted blue;
height: 100%;
}
Give the inner table .status-panel a fixed height, say 200px. CSS will treat this as a minimum height so you won't get into any overflow issues as the table content expands.
For the table cell that you want to expand, table.statut-panel .full-size td, simply set the height to 100%, and it will expand in height to at least 200px (or whatever is a good minimum height).
See demo at: http://jsfiddle.net/audetwebdesign/7L3Bc/
I am trying to fix the width no matter of what the content is. But, the width of the table is changing according to it's content. How can I fix it?
Here is my code:
<style>
table{width:25px; background:#66f;}
</style>
<table>
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>
Try this
<table>
<tbody><tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td style="word-break: break-all;">Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</tbody>
</table>
You need to use table-layout: fixed; and provide width to your table and td elements accordingly.
You should also use word-wrap: break-word; so that you don't get in trouble if you encounter a non-breaked string
Demo
you don't mentioned style class table with dot extension and it won't be called using class attribute.
Here is the code:
<style>
.table{
width:25px; background:#66f;
}
</style>
<table class="table">
<tr>
<td>sn</td>
<td style="width:20px;">Name</td>
</tr>
<tr>
<td>1</td>
<td>Wolfeschlegelsteinhausenbergerdorff</td>
</tr>
</table>