Member Avatar for Md.Akaash

Hello Every one, I found a problem about Twitter Bootstrap Big Table.
When I want to use more then 10 Colum in a Table with in Span 9 or Span 12, Its getting break the layout. So what will be the better solutions. Please give a Demo link or any Semple Table.

  • 3 Contributors
  • 4 Replies
  • 652 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by BMXDad

Dani AI

Generated

— the layout break is usually not a bug in Bootstrap but a mismatch between a table's intrinsic width and the small column you placed it into. is right that tables are best treated as their own block-level components rather than trying to force each table column into the grid, and ’s containment idea points in the right direction. Below are practical, non‑destructive options that keep many columns usable and readable.

  • Make the table scroll horizontally (keeps layout intact, simplest to implement). Wrap the table in a scrolling container and enable touch momentum scrolling:
/* minimal scroll wrapper */
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table-scroll table {
  min-width: 1200px;     /* adjust to the number of columns */
  border-collapse: collapse;
}
  • Constrain and truncate wide cells to avoid runaway columns (useful when exact column widths are acceptable):
.table-fixed {
  table-layout: fixed;
  width: 100%;
}
.table-fixed td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
}

  • Adapt for small screens: hide low‑priority columns with media queries or switch the table to a stacked (row-as-card) layout to preserve content. For example, hide columns for narrow viewports with a small utility class and a media query.

  • For rich UX (sorting, responsive column hiding, fixed headers/columns) consider a table plugin (DataTables, FooTable, etc.) or upgrading to a Bootstrap release with a built‑in responsive wrapper.

Implementation tips: prefer a scroll wrapper for desktop, combine with table-layout: fixed + controlled column widths for neatness, and use media queries to improve mobile usability. Avoid forcing table columns into grid columns (that causes gutters and floats to fight the table’s natural flow).

Recommended Answers

All 4 Replies

Member Avatar for Violet_82

I have started to use Bootstrap quite recently, personally I think it's just a waste of time, but anyway, I think the reason why it is breaking is because you are using the table inside the grid - if I understand correctly what you're saying. My suggestion is to get rid of the grid and follow the example here http://twitter.github.io/bootstrap/base-css.html#tables where no grid is used.

Member Avatar for Md.Akaash

Need some more specific ans please.

Member Avatar for Violet_82

well, not sure I can be more specific than that mate. You said you are using the grid system to create the table - at least this is my understanding - and like I said, forget about the grid system (it looks like the below)

<div class="row">
    <div class="span4"></div>
    <div class="span8"></div>
</div>

That is used to place content in the page, but it shouldn't be used to position tables on the page. Look at the table markup they have on the link I sent you:

<table>
  <caption>...</caption>
  <thead>
    <tr>
      <th>...</th>
      <th>...</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
    </tr>
  </tbody>
</table>

DO you see? There are no div with class of row or span, just a table. If you do that the table shouldn't break. DOes it make sense?

commented: yup +14
Member Avatar for BMXDad

Try setting width to 100%, to keep it contained with in the div.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.