search

twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170k stars 78.75k forks source link

Pre formated text in table mess with CSS grid #22239

Closed rgaiacs closed 7 years ago

rgaiacs commented 7 years ago

Description

I have a pre formated text inside my table and it is messing with the CSS grid.

    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th>Message</th>
                <td><pre>Foo bar</pre></td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

If I remove the pre formated text the CSS grid is OK.

Screenshot

With the pre formated text:

screencapture-localhost-8000-request-10-review-1490179211403

Without the pre formated text:

screencapture-localhost-8000-request-10-review-1490179862244

Source code

<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Software Sustainability Institute - lowFAT -
    </title>
    <link rel="shortcut icon" href="/static/img/favicon.ico" type="image/vnd.microsoft.icon">

    <!-- Begin CSS block -->
    <!-- Bootstrap -->
    <link rel="stylesheet" type="text/css" href="/static/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/sticky-footer-navbar.css">

    <!-- Social Media -->
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="/static/css/academicons.css">

    <!-- Custom -->
    <link rel="stylesheet" type="text/css" href="/static/css/lowfat.css">
    <!-- End CSS block -->

    <!-- Begin Javascript block -->
    <!-- jQuery -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <!-- Bootstrap -->
    <script src="/static/js/bootstrap.min.js"></script>

    <!-- Sorttable -->
    <script src="/static/js/sorttable.js"></script>
    <!-- End Javascript block -->
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <h2>Budget Summary</h2>
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th><strong>Total</strong> budget request</th>
                <td>£1500.00</td>
              </tr>
            </tbody>
          </table>
          <h2>Communication</h2>
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th>Date</th>
                <td>Wednesday, 22 March 2017</td>
              </tr>
              <tr>
                <th>From</th>
                <td>admin</td>
              </tr>
              <tr>
                <th>To</th>
                <td>Black Widow (2016 ✓)</td>
              </tr>
              <tr>
                <th>Message</th>
                <td><pre>Dear Black Widow,

                    Your funding request for 9d6816aa - Black Widow has been Approved.

                    You can check the details of your funding request
                    at https://foo.bar.

                    Notes:
                    ---
                    Foo
                    ---

                    Best wishes,
                    Fellows Management ()
                    Software Sustainability Institute</pre></td>
              </tr>
            </tbody>
          </table>
          <table class="table table-bordered">
            <tbody>
              <tr>
                <th>Date</th>
                <td>Wednesday, 22 March 2017</td>
              </tr>
              <tr>
                <th>From</th>
                <td>admin</td>
              </tr>
              <tr>
                <th>To</th>
                <td>Black Widow (2016 ✓)</td>
              </tr>
              <tr>
                <th>Message</th>
                <td><pre>Dear Black Widow,

                    Your funding request for 9d6816aa - Black Widow has been Approved.

                    You can check the details of your funding request
                    at https://foo.bar.

                    Best wishes,
                    Fellows Management ()
                    Software Sustainability Institute</pre></td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="col-md-6">
          <h2>Review</h2>
        </div>
      </div>
    </div>
  </body>
</html>

Additional information

$ uname -a
Linux ssi 4.9.13-1-MANJARO #1 SMP PREEMPT Sun Feb 26 13:27:28 UTC 2017 x86_64 GNU/Linux

Chromium Version 57.0.2987.98 (64-bit) and Mozilla/5.0 (X11; Linux x86_64; rv:52.0) Gecko/20100101 Firefox/52.0.

mdo commented 7 years ago

Pre-formatted text doesn't allow the text within to wrap like normal body copy because of white-space: pre;, the browser default property-value for that element. It will pick up every character space, including indentation within your code, and reflect that in the browser.

If you wish to change this behavior, you'll need to override it with custom CSS.