Displaying data in HTML5 only shows first field - html

Question

I have an HTML5 page that I want to display data in using knockout binding, I can get the first field to display data, there after I do not see anything. If I remove the first field, the second field displays correctly, if I put the first field back it is the only field to display. If I put a fixed value in it displays correctly. I have confirmed that there are values wherever I try to bind and that binding is correct (e.g. the second field binds correctly if the first field is not present).
Here is my HTML, please tell me what is the problem (I'm an HTML noob):
<table>
<thead>
<tr>
<td></td>
<td>debit amount</td>
<td>credit amount</td>
<td>count</td>
</tr>
</thead>
<tbody>
<tr>
<td>work</td>
<td data-bind="text: accountBalance().WorkDebitAmount"/>
<td data-bind="text: accountBalance().WorkCreditAmount"/>
<td data-bind="text: accountBalance().WorkCount"/>
</tr>
<tr>
<td>open</td>
<td data-bind="text: accountBalance().OpenDebitAmount"/>
<td data-bind="text: accountBalance().OpenCreditAmount"/>
<td data-bind="text: accountBalance().OpenCount"/>
</tr>
<tr>
<td>history</td>
<td data-bind="text: accountBalance().HistoryDebitAmount"/>
<td data-bind="text: accountBalance().HistoryCreditAmount"/>
<td data-bind="text: accountBalance().HistoryCount"/>
</tr>
</tbody>
</table>

Answer 1

You shouldn't expect the table cell element to be self-closing.
<td data-bind="text: accountBalance().HistoryDebitAmount"></td>
Now, since you appear 'new' to the knockout world, I would also put a 'with' binding in your tbody:
<tbody data-bind="with: accountBalance">...</tbody>
Then, in your table cell declarations you no longer need to repeat the bound element :
<td data-bind="text: HistoryDebitAmount"></td>
One further step, I wouldn't do a text binding directly on the table cell, but insert a label or some other element within the table cell:
<td><label data-bind="text: HistoryDebitAmount"></label></td>
All in all, the self-closing issue may resolve everything.