Bootstrap Table No New Line

Bootstrap table no new line

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

Bootstrap table without stripe / borders

The border styling is set on the td elements.

html:

<table class='table borderless'>

css:

.borderless td, .borderless th {
    border: none;
}

Update: Since Bootstrap 4.1 you can use .table-borderless to remove the border.

https://getbootstrap.com/docs/4.1/content/tables/#borderless-table

bootstrap table columns too wide, when I set no-wrap

use these CSS styles:

for your table

        table-layout: fixed;

for th, td

        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;

and use inline (not CSS rules, it's important) width (not max-width) for your th elements, like this:

<th style="width: 11%" ... >

you are free to use px instead of % or other units as well

extra scrolling you may have because of use of '.row' class which adds some negative margin. You must make sure to compensate it by using proper wrapper/container class/styles

In a bootstrap table how remove lines between rows?

You can remove the border from Bootstrap tables using the following CSS:

.table>tbody>tr>td,
.table>tbody>tr>th {
  border-top: none;
}

This will override Bootstrap's td and th selector specificity and apply your border-top style instead of theirs.

Note that this will only apply to tr elements within the tbody. You'll need to add in styling for the thead and tfoot elements if you want this to work for those as well.

Now where you specify some of the rows, I'm guessing you don't want this applying to all of them. For that, simply add a new class to the tr elements you wish remove the border on, and include that class name in your CSS selector(s):

<tr class="no-border">...</tr>

.table>tbody>tr.no-border>td,
.table>tbody>tr.no-border>th {
  border-top: none;
}

Multiline text in a table cell using bootstrap

Changing the pagebreaks to HTML breaks (br tag) works fine in jsfiddle. See my link below. Make sure that when you are generating the HTML you are generating actual < and > symbols, and not the HTML codes.

https://jsfiddle.net/joedonahue/zpj94p0b/

<table id="table1" class="table table-bordered">
    <tbody>
        <tr>
            <th class="col-md-2" scope="row">Description</th>
            <td id="description">Very long test with <br/> so I want to show this in multiline and also want to wrap the text using bootstrap.</td>
        </tr>
    </tbody>
</table>

Avoid wrapping to a new line in the bootstrap 3 tables

You need to override the max-width property on popover which is already set to 276 px.

.popover {
    max-width:500px;
}

Example:

http://jsfiddle.net/JJQS9/193/

---

Related Topics