34 comments on “Custom Column Widths in Bootstrap Tables

  1. Try this for the ellipses issue:

    .myWidth { max-width: 100px; }
    .concat div { overflow: hidden; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; white-space: nowrap; width: inherit; }

    Really long text

  2. Sorry – html tags removed. “Really long text” should be in a div inside a td with the following classes “myWidth concat”.

  3. Awesome works even if you don’t specify column widths. The real key here is wrap the text you want to ellipsis into DIVS then call the classes within the TD.

  4. This is a nice trick! I was testing it and found that you can add several classes to the column: like “col-sm-2 col-xs-1”, for a responsive table layout… even you could use the hidden-?? responsive utility classes (for instance hidden-xs) to hide the table cells at certain size stops. Nice!

    • That’s exactly right. Using these classes enables you to use any of the Bootstrap column classes, including hidden, to make your table responsive and look better on various screen size.

  5. Is it me or is this no longer working correctly? I seemed to have some weird combination of the col sizing (col-sm-2, for example, and the size of the data in the field. Very frustrating. I could be crazy, but I don’t see what is causing it. Ugh!

    • Are you using inputs in the table? If so you are going to run into problems due to the CSS of the inputs. They won’t really follow the table layout.

      • Eric – Thanks for responding. Really appreicated. I should explain what I think I was experiencing, and how I’ve been trying to address it, and what problems that creates. BTW, I don’t have inputs in the table, but I do have buttons, but I think I was seeing the same behavior before the buttons.

        When I tried using the bootstrap classes (e.g. col-sm-2) to set the table widths, it worked well with one exception. If the content is too wide, my column widens and at least that column is too wide. I tried styling the table “table-layout:fixed;” and that works. I thought that stomped on the responsiveness, but now I think it may be working afterall. One problem I’m having is that I would prefer to set some cols as “hidden-xs”, and would have hoped that I could set that in the or in the a colgroup, but so far, that doesn’t seem to work. Still fooling around, worst case I guess I have to set the hidden-xs on each in the column, Oh well. Wondering whether using all the table stuff is worth it? Maybe I should try to do simple rows and columns in bootstrap. Seems like I’d have some more work of a different type going that route. Not sure which route would be shortest. Thanks for any advise/pointers you might be willing to offer. Thanks – Jacob

  6. I am writing an ASP.NET MVC5 Web application and your tutorial regarding sizing the columns in a table worked pretty well for me. Regarding showing a … for text that is too large for the column, I came up with the following C# class that you can specify the max width of text before the … shows:

    using System.Web.Mvc;

    namespace NotaryNet.Helpers
    {
    public static class TruncateTextHelper
    {
    ///
    /// Truncate text at a specific length by apending … at the end.
    ///
    ///
    /// Specify the text to use for truncating if too long.
    /// Specify the length to default to before truncating and appending … to the end of the text string.
    public static string TruncateText(this HtmlHelper HTMLHelper,
    string TheText,
    int TextLength)
    {
    if (string.IsNullOrEmpty(TheText)
    || string.IsNullOrWhiteSpace(TheText))
    {
    return string.Empty;
    }

    if (TheText.Length <= TextLength)
    {
    return TheText;
    }
    else
    {
    return TheText.Substring(0, TextLength) + "…";
    }
    }
    }
    }

  7. It works!! Spent hours trying all the solutions I found. I almost want to cry when this works! Thank you so much!!

  8. That works all great for 12 columns in a table which is all fine. How about handling the scenario in a table having more than 12 columns. I am working on a project and they do not want to use anything else beyond bootstrap 3.x. And to complicate matters, they have tables with 15+ columns and many of them have real long text

Leave a Reply