Tips on displaying two columns as a single column on mobile devices

Question

Tips on displaying two columns as a single column on mobile devices

Bootstrap 3 table is described as:

<style>
/* Overriding Bootstrap style to ensure description text wraps into multiple rows on mobile */
.details-propertyvalue {
    white-space:normal !important;
}
</style>

<table class="table table-hover table-condensed table-striped">
                <tbody><tr>
                    <td>
                        Product information
                    </td>
                    <td class="details-propertyvalue">

sdofsdk sdklöfsdklö sdfklösdflök sdfkösdlökdsö sdfösdkf sdfkösdkf sdöfksdfö sdfksdölf sdfsdlfökö sdfösdlkf sdöfksdöflk sdfösdköfk söfsdköfskdf sdfksdö ... more similar tr elements

On a desktop screen, the table displays properly in two columns. However, on a mobile device, it also appears in two columns but the description column is very narrow.

Is there a way to make it appear in a single column on mobile: with the first row for the title and the second row for the description so that the column takes up the entire width of the screen in portrait orientation?

This table uses Bootstrap 3 and jquery-ui in an ASP.NET MVC4 shopping cart.

jquery html css twitter-bootstrap twitter-bootstrap-3

Answer 1

Answer №1

I faced a similar issue before, and my solution involved reworking the HTML structure. Instead of relying on tables, I opted for using DIVs that mimic table behavior:

HTML

<div class="table table-hover table-condensed table-striped">
  <div class="table-row">
    <div class="table-cell">
      Product information
    </div>
    <div class="table-cell">
      Unrefined Demerara sugar is an ideal complement to coffee. Its rich aroma and crunchy texture add exceptional flavor to cookies and cakes. You can sprinkle it on oatmeal or fruits. Unrefined Demerara sugar is minimally processed, preserving the natural molasses found in sugarcane.
    </div>
  </div>
</div>

CSS

.table {
  display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
  display: table-cell;
}

For mobile optimization, simply change them to display: block:

@media screen and (max-width: 600px) {
  .table, .table-row, .table-cell {
    display: block;
  }
}

This will stack the elements vertically on mobile screens.

An example illustrating this can be found in this JSFiddle link.

Hope this solution proves helpful! :)

Answer 2

I faced a similar issue before, and my solution involved reworking the HTML structure. Instead of relying on tables, I opted for using DIVs that mimic table behavior:

HTML

<div class="table table-hover table-condensed table-striped">
  <div class="table-row">
    <div class="table-cell">
      Product information
    </div>
    <div class="table-cell">
      Unrefined Demerara sugar is an ideal complement to coffee. Its rich aroma and crunchy texture add exceptional flavor to cookies and cakes. You can sprinkle it on oatmeal or fruits. Unrefined Demerara sugar is minimally processed, preserving the natural molasses found in sugarcane.
    </div>
  </div>
</div>

CSS

.table {
  display: table;
}

.table-row {
    display: table-row;
}

.table-cell {
  display: table-cell;
}

For mobile optimization, simply change them to display: block:

@media screen and (max-width: 600px) {
  .table, .table-row, .table-cell {
    display: block;
  }
}

This will stack the elements vertically on mobile screens.

An example illustrating this can be found in this JSFiddle link.

Hope this solution proves helpful! :)

Answer 3

Answer №2

After considering new information:
Based on your preference for changing markup and the requirement of having a table with two columns resembling your example, I suggest utilizing horizontal description lists instead: http://getbootstrap.com/css/#horizontal-description

<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Initially Suggested Solution: Achieving this without custom styles or a significant overhaul of your HTML structure is not feasible.

However, implementing custom CSS can simplify the process. Ensure that your CSS is loaded after Bootstrap for proper functionality.

View a demo on jsfiddle

The key steps taken include:

Including a new class table-responsive to specify the desired behavior only on selected tables.
Applying additional styles (within a media query) to alter the display of table cells accordingly:

Adjusted HTML code:

<table class="table table-hover table-condensed table-striped table-responsive">
    <!-- Your table data goes here -->
</table>

Additional CSS overrides:

/* Adjust the width in the media query below as needed */
@media only screen and (max-width: 768px) {
  table.table-responsive tr {
    display: block;
  }

  table.table-responsive tr td {
    display: block;
  }
}

Answer 4

After considering new information:
Based on your preference for changing markup and the requirement of having a table with two columns resembling your example, I suggest utilizing horizontal description lists instead: http://getbootstrap.com/css/#horizontal-description

<dl class="dl-horizontal">
    <dt>...</dt>
    <dd>...</dd>
</dl>

Initially Suggested Solution: Achieving this without custom styles or a significant overhaul of your HTML structure is not feasible.

However, implementing custom CSS can simplify the process. Ensure that your CSS is loaded after Bootstrap for proper functionality.

View a demo on jsfiddle

The key steps taken include:

Including a new class table-responsive to specify the desired behavior only on selected tables.
Applying additional styles (within a media query) to alter the display of table cells accordingly:

Adjusted HTML code:

<table class="table table-hover table-condensed table-striped table-responsive">
    <!-- Your table data goes here -->
</table>

Additional CSS overrides:

/* Adjust the width in the media query below as needed */
@media only screen and (max-width: 768px) {
  table.table-responsive tr {
    display: block;
  }

  table.table-responsive tr td {
    display: block;
  }
}

Answer 5

Answer №3

Your response was:

I prefer to stick with Bootstrap 3 without adding any additional custom styles if possible

Although I share my answer here, it may be helpful for someone else:

To make your table responsive, assign a class name such as 'responsive'

table.responsive{
  width: 100%;
   }
table.responsive tr { 
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   width:100%;
}
table.responsive td {
   width: 50%; //Adjust based on your needs

   }
 @media screen and (max-width:480px) {
   table.responsive td{
      width:100%;
     }
 }

Answer 6

Your response was:

I prefer to stick with Bootstrap 3 without adding any additional custom styles if possible

Although I share my answer here, it may be helpful for someone else:

To make your table responsive, assign a class name such as 'responsive'

table.responsive{
  width: 100%;
   }
table.responsive tr { 
   display: flex;
   display: -webkit-flex;
   flex-wrap: wrap;
   -webkit-flex-wrap: wrap;
   width:100%;
}
table.responsive td {
   width: 50%; //Adjust based on your needs

   }
 @media screen and (max-width:480px) {
   table.responsive td{
      width:100%;
     }
 }

Tips on displaying two columns as a single column on mobile devices

Answer №1

Answer №2

Answer №3

Similar questions

Show information from the console logger

Ways to distinguish between two div elements that have scroll bars and those that do not

Incorporating text box input into a data table

Incorporating image uploading into an already existing user form using the Cropper Jquery Plugin

I am puzzled by the presence of the 'x' value in the JSON object when creating a column chart using CanvasJS. Its origin remains unknown to me

Invoke the loaded function using ajax

Finding the Row Number of an HTML Table by Clicking on the Table - Utilizing JQuery

Using the width property to style a div element

What are some methods for utilizing jQuery or Javascript to dynamically modify CSS styles depending on the current URL?

What are some troubleshooting steps for adjusting the position of this carousel control?

IE is notorious for not playing well with CSS

Display options through numerical selection

Issues with Bootstrap Modal Checkbox Functionality

Creating a custom named page using PHP and MySQL

Guide to integrating jssor into an AngularJS application

Looking for and changing the background of a div element using jQuery's .find

Counting down with Jquery when times run out

Generating a collection of model objects using Javascript

Ways to retrieve the file name and additional attributes from a hidden input type

Having trouble concealing images in HTML Emails on Outlook 2013