Question 242095 in Html Question posted in
Some basic documentation can be found here.

Html – How to specify the width of a column and enable automatic line wrapping in a table component?

How to specify the width of a column in a table, and enable automatic line wrapping based on the width limit, while allowing the height of the cells to be determined by the actual number of content lines.

enter image description here

How can I achieve this effect on a table component?

Tags:

2

Answers


  1. 0

    You need to specify the width of your choice and add the word-break: break-all; rule:

    tr td:not(:first-child) {
    width: 45px;
    word-break: break-all;
}
    <table>
    <tr>
        <td>1</td>
        <td>asjhhasjkdgsakd asdjkashgdkja sjhgasjkd jashgajg asjdagd</td>
    <tr>
    <tr>
        <td>2</td>
        <td>asjhhasjkdgsakd asdjkashgdkja sjhgasjkd jashgajg asjdagd</td>
    <tr>
    <tr>
        <td>3</td>
        <td>asjhhasjkdgsakd asdjkashgdkja sjhgasjkd jashgajg asjdagd</td>
    <tr>
    <tr>
        <td>4</td>
        <td>asjhhasjkdgsakd asdjkashgdkja sjhgasjkd jashgajg asjdagd</td>
    <tr>
</table>
    Login or Signup to reply.
  2. 0

    Solution

    In VTable, add the following configuration to the table options.

    heightMode: 'autoHeight', // the height of each row is determined by the content and will expand accordingly.
autoWrapText: true, // Enable automatic line wrapping.

    Code Example

    const option: TYPES.ListTableConstructorOptions = {
  records,
  columns,
  heightMode: "autoHeight",
  autoWrapText: true
};

    Results

    Online demo：https://codesandbox.io/s/vtable-autoheight-dktrk4

    enter image description here

    Related Documentation

    Auto wrap Demo：https://visactor.io/vtable/demo/basic-functionality/auto-wrap-text

    Auto wrap Tutorial：https://visactor.io/vtable/guide/basic_function/auto_wrap_text

    Related api：

    https://visactor.io/vtable/option/ListTable#autoWrapText

    https://visactor.io/vtable/option/ListTable#heightMode

    github：https://github.com/VisActor/VTable

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search