CODEWITHSUNDEEP
htmlcssasp.net-mvcasp.net-core
Mkalafut
Mkalafut

Reputation: 741

How to wrap formatted text inside a responsive table?

My MVC application has service methods that retrieve values from our database and adds them to a model to be displayed on the page. Standard stuff. Here I am pulling a list of steps, by type, with their description. To test this out I've just put in some standard Lorem Ipsum text so I could see something.

I'm not the greatest with front-end so I'm scratching my head at this a bit. Right now my data with very minimal styling looks like this:

<style>
th span {
    float: right;
}
/*Makes every row stand out from the previous*/
tr:nth-child(even) {
    background-color: #f2f2f2;
}

.header:hover {
    background-color: #e6eeff;
}

table.table-fixed{
    table-layout:fixed;
    width:100%;
}

</style>

<body>
<div>
    <h1>About @Model.Client.ClientDisplayName</h1>
    <hr />
</div>
<div>
    @foreach (var item in Model.Steps)
    {
        <h3>@item.Key</h3>
        <table class="table table-bordered table-fixed">
            <tr class="header">
                <th style="width:15%">
                    Step
                </th>
                <th style="width:85%">
                    Description
                    <span>-</span>
                </th>
            </tr>
            @foreach (var step in Model.Steps[item.Key])
            {
                <tr>
                    <td>
                        @step.Name
                    </td>
                    <td>
                        @step.DetailedDescription
                    </td>
                </tr>
            }
        </table>
        <br />
    }

</div>

enter image description here

It sits in the center of my page and looks nice enough but it's not preserving the return character in the text. So I looked into it and added a paragraph tag with the following additional styling:

    p.description {
    white-space: pre;
}

....

<tr>
    <td>
      <p class="description">@step.Name</p>
    </td>
    <td>
      <p class="description">@step.DetailedDescription</p>
    </td>
</tr>

but now my table won't fit the text. See below.

enter image description here

I read up about it and figured I should add some <td> styling so I added a styling rule and changed my <td> tags accordingly to include the new class.

    .wrap {
    word-wrap: break-word; /*old browsers*/
    overflow-wrap: break-word;
}

but it's still showing up like the 2nd picture. The text has the return characters as expected, but no amount of fiddling around with <p> tags or adding <div>s around the content seems to help.

Upvotes: 0

Views: 258

Answers (1)

Mkalafut
Mkalafut

Reputation: 741

I was trying to do too many conflicting things with CSS apparently. By just adding a simple style to the <td> I was able to solve the problem in a satisfactory way.

<style>
...
    .wrap {
    white-space:pre-line;
}
</style>

<tr>
   <td class="wrap">
      <p>@step.Name</p>
   </td>
   <td class="wrap">
      <p>@step.DetailedDescription</p>
   </td>
</tr>

Upvotes: 2

Related Questions