Bootstrap table no new line

Question

<h3>Mijn biedingen</h3>
        <table class="table table-responsive">
        <thead>
        <tr>
            <th>nummerplaat</th>
            <th>Bod</th>
            <th>Status</th>
            <th>Datum bod</th>
            <th>Aankoopdatum</th>
        </tr>
        </thead>
        <tbody>
                    <tr>
            <td>THOMAS</td>
            <td>&euro;    90 000,00</td>
            <td>open</td>
            <td>15/10/2014</td>
            <td>
                                        Niet beschikbaar
                                </td>
        </tr>
                    </tbody>
    </table>

This is my code, this is the result: https://www.dropbox.com/s/6vkc2mpu7z4yqgq/Screenshot%202014-10-15%2019.28.09.png?dl=0

How can I have the money TD on one line? This website is responsive but the the text becomes in two lines because of the spaces in the text.

You are using `table-responsive` incorrectly! See https://github.com/twbs/bootlint/wiki/E027 — cvrebert, Oct 15 '14 at 17:42

kiranvj · Accepted Answer · 2021-01-05T03:38:10.487

99

If you want to have the text in same line use CSS style

white-space:nowrap;

eg:

<span class="nowrap">Your text here</span>

In CSS style sheet

 .nowrap {
        white-space:nowrap;
    }

Bootstrap way of doing it

Since you already have bootstrap, no need of class definition, you can use class text-nowrap

Just try this in your td or if doesn't work try adding a span around your text and assign the class

eg:

<td class="text-nowrap"> Your text </td>

or

<td> <span class="text-nowrap">Your text </span></td>

You can also have it in the table tag, so that no need to add in each element

eg: <table class="text-nowrap"> .... </table>

More on this in Bootstrap documentation Check under Alignment classes

Bootstrap 4 documentation here

Bootstrap 5 documentation here

edited Jan 05 '21 at 03:38

answered Oct 15 '14 at 17:35

kiranvj

32,342
7
71
76

@StijnHoste Glad to know it helped. Please accept the answer if you think so. – kiranvj Oct 15 '14 at 18:32
2

You can add the class definition to the parent div or table class to nowrap all the text inside, instead of every single text. – sharpshadow Jun 25 '15 at 20:21
1

Worked like a charm. I hab to add it to every td, but it's fine. Thanks :) – Marty_in_a_Box Sep 06 '16 at 12:30
2

I added it directly to the table class and worked like a charm. – Todd Skelton Mar 30 '17 at 02:06
2

This is still a solid solution for BS4 – klewis May 01 '19 at 12:33

score 2 · Answer 2 · answered Sep 23 '20 at 17:31

2

Bootstrap 4.

Can be applied to an entire table as well if you don't need to support multiple long text:

<table class="table text-nowrap">

https://jsfiddle.net/439dg2k0/1/

answered Sep 23 '20 at 17:31

Onimusha

3,348
2
26
32

score -1 · Answer 3 · answered Oct 15 '14 at 17:37

-1

Use   instead of space

answered Oct 15 '14 at 17:37

Barry

3,683
1
18
25

7

This will solve the problem, but it requires changing the data that's presented. Fixing it with style lets you present arbitrary data and present it consistently. – Surreal Dreams Oct 15 '14 at 18:04

Bootstrap table no new line

3 Answers3

Linked