Small and compact tables in Bootsrap - Browser Rendering Trace

Render Flow - Small and compact tables

[Load HTML table] -> [Apply Bootstrap base styles] -> [Apply .table-sm class] -> [Reduce padding in cells] -> [Render compact table]

The browser reads the HTML table, applies Bootstrap's base table styles, then applies the .table-sm class which reduces cell padding, resulting in a smaller, more compact table.

Render Steps - 3 Steps

Code Added:<table class="table">

Before

[Empty page]

→

After

[ Table with normal cell padding ]
[+---------------------------+]
[| Name  | Age  | City       |]
[| Alice | 30   | New York   |]
[| Bob   | 25   | Chicago    |]
[+---------------------------+]

Adding the Bootstrap .table class applies base styles including borders and default padding to the table cells.

🔧 Browser Action:Parses HTML, applies CSS rules for .table, triggers layout and paint.

Code Sample

A Bootstrap styled table with smaller padding inside cells, making the table compact and easier to fit in tight spaces.

Bootsrap

<table class="table table-sm">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>City</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alice</td>
      <td>30</td>
      <td>New York</td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>25</td>
      <td>Chicago</td>
    </tr>
  </tbody>
</table>

Bootsrap

.table-sm > :not(caption) > * > * {
  padding: 0.25rem 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2 (.table-sm), what visual change do you see in the table?

A Cell padding becomes smaller, making the table more compact

B Table borders disappear

C Table text becomes bold

D Table background color changes

Common Confusions - 2 Topics

Why doesn't my table look smaller after adding .table-sm?

You must add .table-sm together with .table on the same table element. .table-sm only changes padding if .table styles are present.

💡 Always use both .table and .table-sm classes together for compact tables.

Why does my table overflow on small screens even with .table-sm?

The .table-sm class only changes padding, it doesn't make the table responsive. You need to wrap the table in a .table-responsive container to enable horizontal scrolling.

💡 Use .table-responsive wrapper to handle small screen overflow.

Property Reference

Property	Value Applied	Visual Effect	Common Use
.table	Base Bootstrap table styles	Borders, padding, and basic table formatting	Standard tables with default spacing
.table-sm	Reduced padding: 0.25rem 0.5rem	Smaller cell padding, compact table layout	Tables needing less vertical space
.table-responsive	Overflow-x: auto on container	Adds horizontal scroll on small screens	Making tables mobile-friendly

Concept Snapshot

Bootstrap small tables use .table-sm class It reduces cell padding to make tables compact Always combine .table and .table-sm classes Use .table-responsive wrapper for mobile scrolling Ideal for saving vertical space in UI