Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Help with code in table


Heatherbell

Recommended Posts

Trying to stop the words breaking mid-word here in a table in mobile view - grateful for any advice.
I added the text-break (which is probably wrong) but without it the table doesn't shrink to fit screen width
Using this code on the left column:
 echo '<td class="col-sm-3 text-break">
gives:

Untitled33.png.4a5ad5373ea5bef2b9f09f37b73d6be7.png

Link to comment
Share on other sites

Link to comment
Share on other sites

Link to comment
Share on other sites

Hi,

Potentially a dumb question, but do you need to use tables? Could you use bootstrap list groups or something else?

Peter

CE PHOENIX SUPPORTER

Support the Project, go PRO and get access to certified add ons

Full-time I am a C-suite executive of a large retail company in Australia. In my spare time, I enjoying learning about web-design.

Download the latest version of CE Phoenix from gitHub here

Link to comment
Share on other sites

@peterpil19
At this stage I'll give anything a go! Spent too much time on it already for what it's worth but has now just become a challenge!
I'm trying to update an old mod - have got it working on Phoenix now, just that niggly format issue to solve - it was coded with a table so have been working with that but probably, as you suggest, time for a rethink 👍

Link to comment
Share on other sites

If you can't get the table to play nicely...

Grid Layout;

<div class="row">
  <-- each -->
  <div class="col-10">
    lots of text
  </div>
  <div class="col-2">
    price
  </div>
  <!-- eof each -->
</div>

List Group;

<ul class="list-group">
  <-- each -->
  <li class="list-group-item d-flex justify-content-between align-items-center">
    lots of text
    <span>price</span>
  </li>
  <!-- eof each -->
</ul>

Of the two, the list group is less code and a bit nicer to play with.

Link to comment
Share on other sites

Boostrap 4 responsive tables work fine on mobile screens, you just need to produce the correct html. Stock BS table table-borderless class with no aditional css required. Text is fully responsive and wraps without any issues.

image.png.cf639c36cb8b0e529403f1d83ace196c.png

 

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...