0

I have table like this:

<table class="table table-bordered">
    <tbody data-bind="foreach: { data: dataset, as: 'rowInfo' }">
        <tr style="max-height: 30px" 
            data-bind="foreach: { data: $parent.metadata, as: 'colInfo' }">
            <td style="max-height: 30px" data-bind="text: rowInfo[colInfo.DataColumn],
                attr: {width: Width}"></td>
        </tr>
    </tbody>
</table>

I want to have a grid like experience. So I don't want the text to wrap in the cell or make the cells to resize. I want to have fixed sized cells which their height set to 30px and the width set to the colInfo.Width which comes from knockout.

But with the above code, the cells re-size to fit their content. How should I set the attributes to have fixed height and width?

mehrandvd
  • 8,806
  • 12
  • 64
  • 111

1 Answers1

1

To give a max-height to cell contents you'll need to wrap it in another element (e.g. a div). In addition, I'd recommend using the style binding, like this:

        <td>
        <div data-bind="text: rowInfo[colInfo.DataColumn],
            style: { width: Width, height: '30px' }"></div>
        </td>

See this fiddle for a working demo.

Community
  • 1
  • 1
Jeroen
  • 60,696
  • 40
  • 206
  • 339
  • Thanks it works great. But it seems it is illegal to use `div` in `th` for headers. – mehrandvd Aug 27 '13 at 07:38
  • 1
    Glad it works. PS. According to [the spec](http://www.whatwg.org/specs/web-apps/current-work/multipage/tabular-data.html#the-th-element) and [the validator](http://validator.w3.org/) it's legal to use a div in a th. – Jeroen Aug 27 '13 at 09:39