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.

Sowell

You are using table-responsive incorrectly! See github.com/twbs/bootlint/wiki/E027 – Temblor

Answer 1

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

Sublunary

@StijnHoste Glad to know it helped. Please accept the answer if you think so. – Sublunary

You can add the class definition to the parent div or table class to nowrap all the text inside, instead of every single text. – Devereux

Worked like a charm. I hab to add it to every td, but it's fine. Thanks :) – Genetic

I added it directly to the table class and worked like a charm. – Haukom

This is still a solid solution for BS4 – Essence

Answer 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/

Eugeneeugenia

Answer 3

Use   instead of space

Mattoid

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. – Chinook