Skip to Main Content

DevOps, CI/CD and Automation

Announcement

For appeals, questions and feedback about Oracle Forums, please email oracle-forums-moderators_us@oracle.com. Technical questions should be asked in the appropriate category. Thank you!

ojTable - limit the width of column header

sai.gssrMar 30 2017 — edited Mar 31 2017

Hi!

I am using ojTable component. My table will be similar to this : http://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=table&demo=customTable . I have a column header named "Target pages completion Rate" and values will be 3- digit numbers (1-999) .

The problem is I am not able to limit the width of header , also not able to wrap the text.

The code will be as follows:

<table id="table"  summary="Projects List" aria-label="Projects Table"

           data-bind="ojComponent: {component: 'ojTable',

                                    data: myData,

                                    display: 'grid',

                                    columns: [{headerText: 'Type',

                                               field: 'CheckType',

                                               style: 'width: 95px; white-space: normal;'},

                                              {headerTemplate: 'test',

                                                  headerText: 'Target pages completion Rate',

                                               field: 'TargetpagescompletionRate',

                                               style: 'width: 95px; white-space: normal;'},

                                               rootAttributes: {'style':'width: 100%; height: 100%;'}}">

    </table>

    <script type="text/html" id="oracle_link">

        <td>

            <a href="http://www.oracle.com">Oracle</a>

        </td>

    </script>

    <script type="text/html" id="test">

        <td data-bind="style: 'width: 95px; white-space: normal; word-wrap: break-word;'">

            Target pages completion Rate

        </td>

    </script>

Message was edited by: sai.gssr

Message was edited by: sai.gssr

Comments
Post Details
Added on Mar 30 2017
2 comments
381 views