Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview
Related
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td>1</td>
</tr>
</table>
Draws a table which is just a bit wider than the word "one", and it's ok.
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td style='padding:0 0 0 0'>
<input style='width:100%' value='1'>
</td>
</tr>
</table>
Draws a table which is 4 times wider than needed.
Please advise how to make the width of INPUT equal to 100% of non-stretched TD without assigning the width of TD itself?
You can add a size attribute to your input. For example:
<table border=1>
<tr>
<th>one</th>
</tr>
<tr>
<td style='padding:0 0 0 0'>
<input size='1' value='1'>
</td>
</tr>
</table>
I have following table in my site but for some reason the style width:100px does not work for td. Probably some other css is preceding. I have also tried !important but it still doesn't work.
What can I do to get the width to precede all else?
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:100px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
Does anyone know how I can get the width to work?
Check this jsfiddle
<table>
<tbody>
<tr>
<th>Resurs</th>
<th>Service</th>
<th>Datum</th>
<th>Tid från</th>
<th>Tid till</th>
<th></th>
</tr>
<tr>
<td style="text-align:left">Resource</td>
<td style="width:330px;word-break:break-all">kjslkjfsdjfj sfjlsjfklsljf slfj lsjfs flsj fkljskf lksj fsjf sdlfj lsjföslajfölsjföl afö aölfjas fasöfj </td>
<td>2015-02-22</td>
<td>10.00</td>
<td>11.00</td>
<td>sdfdsf</td>
</tr>
</tbody>
</table>
http://jsfiddle.net/vjka7b5j/
its working properly ,
This is supposed to be a sudoku table. I checked the css elements and everything appears to be in good working order. I think that I made mistakes in the colspan and rowspan in the table. The "greenBox and "goldBox" classes should make the background images span across 3 rows and 3 columns; however, in the sudoku 9x9 table only 9 squares are filled with the background images. Any help is greatly appreciated. Thank you for your time.
<table class="spuzzle">
<caption>Sudoku</caption>
<thead>
<tr>
<th> </th>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<th>A</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>4</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>5</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>5</td>
<td> </td>
<td>3</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>7</td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td>1</td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>B</th>
</tr>
<tr>
<th>C</th>
</tr>
<tr>
<th>D</th>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td>9</td>
</tr>
<tr>
<td>4</td>
<td>7</td>
<td>2</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>2</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>9</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td>9</td>
<td>3</td>
<td>7</td>
</tr>
<tr>
<td>4</td>
<td> </td>
<td>8</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>E</th>
</tr>
<tr>
<th>F</th>
</tr>
<tr>
<th>G</th>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td>1</td>
</tr>
<tr>
<td> </td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td> </td>
<td>6</td>
<td> </td>
</tr>
</table>
</td>
<td class="goldBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td>1</td>
</tr>
</table>
</td>
<td class="greenBox" rowspan="3" colspan="3">
<table class="subTable">
<tr>
<td> </td>
<td>5</td>
<td>2</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>7</td>
<td> </td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<th>H</th>
</tr>
<tr>
<th>I</th>
</tr>
</tbody>
`
</table>
The CSS is posted below. But I believe that it's functioning as it should.
table.spuzzle
{
border-collapse:collapse;
}
table.subTable
{
border-collapse:collapse;
}
table.spuzzle td
{
border:5px outset gray;
}
table.spuzzle th
{
font-size:8px;
color:gray;
}
tbody th
{
height:40px;
}
table.subTable td
{
font-size:20px;
color:blue;
width:40px;
height:40px;
text-align:center;
vertical-align:middle;
border:1px solid black;
}
td.goldBox
{
background-image:url("gold.jpg");
background-position:center center;
background-repeat:no-repeat;
}
td.greenBox
{
background-image:url("green.jpg");
background-position:center center;
background-repeat:no-repeat;
}
It appears your background images aren't large enough.
Try replacing images with background color to see if the basic affect is right then, look at what is going wrong with the images, perhaps remove background-repeat:no-repeat;. See http://jsfiddle.net/d6ZNF/1/ for using solid colors.
When debugging, also keep in mind that CSS is case-sensitive. I also recommend using a tool like Firebug for Firefox (free download) or developer tools in Chrome (hit F12) to inspect the suspect elements and see what, if any, CSS classes are applied to them.
I have a table and I need to format the currency in order for the . to be displayed always under each other.
This is the table:
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td>GBP 20.00</td>
<td> </td>
<td>GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td>GBP 100.00</td>
<td> </td>
<td>GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td>GBP 50.00</td>
<td>GBP 970.00</td>
</tr>
</tbody>
</table>
How can I achieve this?
How does this look?
<style type="text/css">
.price {
text-align: right;
}
</style>
<table class="data" cellspacing="0" cellpadding="5" border="0">
<thead>
<tr>
<th>Date</th>
<th>Description</th>
<th>Field1</th>
<th>Field2</th>
<th>Balance</th>
</tr>
</thead>
<tbody>
<tr class="verticalDivider"></tr>
<tr>
<td>08 April 2010</td>
<td>value 1</td>
<td class="price">GBP 20.00</td>
<td> </td>
<td class="price">GBP 20.00</td>
</tr>
<tr>
<td>08 May 2010</td>
<td>value 2</td>
<td class="price">GBP 100.00</td>
<td> </td>
<td class="price">GBP 1020.00</td>
</tr>
<tr>
<td>19 May 2010</td>
<td>value 3</td>
<td> </td>
<td class="price">GBP 50.00</td>
<td class="price">GBP 970.00</td>
</tr>
</tbody>
</table>
assuming you'll always print 2 decimal digits, I would define all my table <col /> then I'd assign text-align : right to that cols that contain prices (and padding-right to create space from border)
otherwise as specified in http://www.w3.org/TR/html401/struct/tables.html#h-11.3.2 you could assign align="char" char="." to table cols (if you browser support it)
To have the currency symbol (GBP) AND the dots aligned you can do the following (tested on Chrome and Firefox, breaks on IE):
CSS file:
...
td.money {
text-align: right;
}
.currencySymbol {
float: left;
}
...
And your table cell would look like:
<td class="money">
<div class="currencySymbol">GBP</div>
970.00
</td>
Although it's dangerous (probably the reason why it breaks on IE), see: Is a DIV inside a TD a bad idea?
<td align="right">GBP 20.00</td>
<td align="right">GBP 100.00</td>
<td align="right"> </td>
I Guess thats what you are looking for as long as thee is ".00". If I were you, I would start using css even for this bit of code where you need to edit 3 places instead of one.
Most of the time it makes sense to organize table data in rows. However right now I'm dealing with a table that compares data across several columns. Each column is a product, so I'd like to keep all product data grouped together.
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
<td>Compatibility</td>
<td>Designer</td>
<td>Manufacturer</td>
<td>Age Requirement</td>
</tr>
Using the TR tag that row will run horizontally, is there a way to make it run vertically?
Update:
I would like the table to display like regular html in this example:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
However I would like to be able to code it by related content:
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
<tr>
<td>Name</td>
<td>Price</td>
<td>Weight</td>
<td>Height</td>
</tr>
In other words, I want the table row tag (tr) to act like a column.
<tr>
<td>Name</td>
</tr>
<tr>
<td>Price</td>
</tr>
<tr>
<td>Weight</td>
</tr>
<tr>
<td>Height</td>
</tr>
<tr>
<td>Compatibility</td>
</tr>
<tr>
<td>Designer</td>
</tr>
<tr>
<td>Manufacturer</td>
</tr>
<tr>
<td>Age Requirement</td>
</tr>
If you want another product beside it, you would do:
<tr>
<td>Name</td>
<td>Name2</td>
</tr>
<tr>
<td>Price</td>
<td>Price2</td>
</tr>
<tr>
<td>Weight</td>
<td>Weight2</td>
</tr>
<tr>
<td>Height</td>
<td>Height2</td>
</tr>
<tr>
<td>Compatibility</td>
<td>Compatibility2</td>
</tr>
<tr>
<td>Designer</td>
<td>Designer2</td>
</tr>
<tr>
<td>Manufacturer</td>
<td>Manufacturer2</td>
</tr>
<tr>
<td>Age Requirement</td>
<td>Age Requirement2</td>
</tr>
This solution may not work on older browsers, but something along the lines of this approach generally works for me:
<style>
.col {
display: table-cell;
}
</style>
<body>
<div class="col">Column 1</div>
<div class="col">Column 2</div>
<div class="col">Column 3</div>
</body>