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.
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>
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 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 wanted to have a table like this using angular repeat
HTML
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td rowspan="2">$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</table>
I have written an Angularjs code for the above as follows.
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
<th>Savings for holiday!</th>
</tr>
<tr ng-repeat="row in rows">
<td>{{row.month}}</td>
<td>{{row.savings}}</td>
<td rowspan="2">{{row.holidaysavings}}</td>
</tr>
</table>
The td with rowspan gets repeated using ng-repeat which is not required.
How can I avoid this?
If you want the last td element only if row.holidaysavings is set (you didn't mention it, but it sounds like it!), you can use ngIf.
ngIf is similar to ngShow with the exception that it removes it from the DOM instead of setting display: none if the expression is falsy (for example 0 or the empty string), which sounds like what you want:
<td rowspan="2" data-ng-if="row.holidaysavings">{{row.holidaysavings}}</td>
Have you tried using ng-class? Something like <td ng-class='{rowSpanClass: row.holidaysavings >== "$50"}
In HTML we can use <tbody> and <thead>.
Which works fine with a 'normal' table.
<table>
<thead>
<tr>
<th>col1</th>
<th>col2</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1-1</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
However sometimes there is a rotated table:
<table>
<tr>
<th>col1</th>
<td>data1-1</td>
</tr>
<tr>
<th>col2</th>
<td>data1-2</td>
</tr>
</table>
When I use a rotated table I never use <tbody> or <tbody>.
However if I'm correct the <tbody> is mandatory if a <tfoot> is used.
Does a <tr> have to be inside a <tbody>
So my question is:
Is the above statement correct (that it is indeed mandatory if a <tfoot> is used)?
If so where would you add <thead>s and <tbody>s in the second example table?
According to the W3 specification the tbody tag is always mandatory unless your table has only one table body and there is no header and foot sections.
In your case you can use:
<table>
<tbody>
<tr>
<td>col1</td>
<td>data1-1</td>
</tr>
<tr>
<td>col2</td>
<td>data1-2</td>
</tr>
</tbody>
</table>
That is HTML valid. Since you don't have "real" header on top of the table I think no header tag applies here. I'm not sure rotated tables are supported by HTML convention, so you basically have a normal table with only body.