How do I make an existing html table responsive?

[carol mcgann]

I have an existing Dreamweaver-built site that I am making responsive. It has about 3000 tables in it (data management, not layout), so I really want to find a global solution to making them responsive, I don't want to change the code in each one individually. At this point I have converted it to a bootstrap site, and everything but the tables seems to mostly work.

Now, on narrowing the screen, the tables go to a single column; each row's data is still there, but they are stacked. The first table below (what I'm starting with) becomes the second, which is clearly unacceptable:

Header 1	Header 2	Header 3
1a	1b	1c
2a	2b	2c
3a	3b	3c

Header 1
Header 2
Header 3
1a
1b
1c
2a
2b etc.

Most of my tables currently have a class applied to them, so that may offer a global solution, if there might be characteristics that could be added to the existing class.

Possible problem areas: most of the tables have column widths, etc., applied to them, as we were trying to make them most attractive for the desktop (who knew we would need to do something entirely different later?), and those are not even close to all being the same, so "find and replace" won't helpful there. There are also varying numbers of rows and columns across the site.

My current iteration is on line (bricarol.xyz). If you click on "racing results and archives" then "tour de france", there's a big table there, and all my code.

Hoping someone has some magic!

[Jon Fritz]

You missed the z in .xyz...

http://bricarol.xyz

[ALsp]

https://forums.adobe.com/people/Jon+Fritz+II  wrote

You missed the z in .xyz...

http://bricarol.xyz

Sheesh Thanks, Jon.

The rudimentary conversion you've got going is very easy. However, it renders your headers irrelevant and kind of makes the table confusing. You could do a proper conversion, but it goes way beyond what Bootstrap can do, and you would need to either hide the headers and make the data stand on its own, or make your headers considerably less verbose. From the tone of this thread, it's apparent you are sold on Bootstrap, so I'm not going try to persuade you to use more efficient code. But if there's one teaching moment we can get out of this its that when it comes to responsive design, mobile-first is usually the best -and most productive- strategy.

[carol mcgann]

Not so much "sold" on it, not crazy about it, but have a bunch of effort into it already, and starting over is not appealing. Headers aren't a problem for the most part as I didn't often use header tags, just formatted the text in a regular table row. I will re-format/re-word those that need it.

Thanks for the input---it's all helpful!

[ALsp]

You're welcome.

I was not referring to the TH tag. I was referring to the semantic connection between header text and its related data. The Bootstrap CSS is rudimentary and linearizes the table cells at a certain point. When that happens, the header text that describes the data is no longer visually connected to the data.

Be that as it may, I guess you'll do what's best for your visitors. But I am curious. I have a different background than most of the ACPs around these parts, I am also different in that I do not think very highly of Bootstrap. I am trying to ascertain if the typical Dreamweaver user is embracing Bootstrap because it comes as an option in Dreamweaver, or it because many of the Dreamweaver "experts" encountered on these forums seem to embrace it and/or recommend using it.

[carol mcgann]

Why am I using Bootstrap? It wasn't a considered decision about what would work best, it just happened. I have a 5,000+ page site to make responsive, and there's just me, no staff, so I needed to do something reasonably easy to convert. My current site uses a template, so I felt the easiest thing was to write a single responsive page that would be a new template, and then I would just update all my pages at once to the new version of the template.

I tried first to do the job myself in Dreamweaver, using the various sorts of templates it has to offer (Bootstrap and others), but had no success and gave up and hired someone. The only person I found around here that wanted to do that liked Bootstrap. I don't really, it is full of all sorts of code I don't understand and can't deal with when I need to make tweaks (and it really makes the class pull-down menu in DW useless!), but it's where I am at this point.

Some of the available info in websites about Bootstrap indicate that it is really easy to use because it has lots of pre-made components that you can stitch together. That works fine if you want to have a site that looks like everyone else's. That didn't do it for me. And no, I didn't encounter any recommendations on the Dreamweaver forums that led me in that direction.

Thanks for your help on this project---it is so nice to have people like you and Ben to help out when we have problems!

[ALsp]

Thanks for sharing that. You did nothing wrong. Adobe, as well as the folks on the forum led you to the choices you made. As we write, there is a new Bootstrap release and Adobe is behind implementing it. There are alternatives. Depending on how far along you are in your conversions, you might want to consider taking a different route. If you are interested, I'll provide you with a complimentary copy of our page layout tool to test. Let me know, and no matter the path you wind up taking, good luck to you.

[W_J_T]

ALsp  wrote

Adobe, as well as the folks on the forum led you to the choices you made.

Her entire last comment actually reads completely otherwise.

[ALsp]

I have no idea what you are going on about, nor why... unless you are stalking me. One of the reasons I accepted Adobe's invitation to be an ACP was to help others and to attempt to make this forum as productive --and civil-- as possible. If you have a problem with me, personally, my phone number and address are listed on my web site. Feel free to contact me directly. Otherwise, all you're going to do is get another thread locked.

[W_J_T]

I was merely pointing out what she seemed to indicate herself in her last post regarding what you then stated not actually being the case. As for your response, it seems rather over the top, given that all I was trying to point out was what I again just restated here.

[B i r n o u]

since the last versions of Dreamweaver, the home screen places in first place the page creation icon based on Bootstrap...

from there to conclude that Adobe promotes this type of construction... hmmm... just a small step...

moreover on the forum, not a day goes by without a solution based on Bootsrap being mentioned... hmmm... there again implicitly Bootstrap becomes one of the best solutions to run with... don't you think?

[pziecina]

https://forums.adobe.com/people/B+i+r+n+o+u  wrote

from there to conclude that Adobe promotes this type of construction... hmmm... just a small step...

moreover on the forum, not a day goes by without a solution based on Bootsrap being mentioned... hmmm... there again implicitly Bootstrap becomes one of the best solutions to run with... don't you think?

At the very real risk of hi-jacking this discussion, I don't think Dw had/has much choice but to promote Bootstrap given that with the decision to drop fluid grid layouts a rwd site creation replacement was required.

No matter what I personally think of Bootstrap, or any other framework/template solution, the inclussion of bootstrap or some other framework was a necessity.

Most of the Dw team and many of the Dw advisors and users, are not full time web designers or developers, and such people cannot build their own solution when they are not willing to spend the time required to learn how. Result - Bootstrap, and half baked features.

[B i r n o u]

That's exactly the point I was describing,...... Adobe..... and the forum indirectly... promote Bootstrap, and all this has somehow led to the choice made by @mcgann, as described by ALsp, I also share this analysis....

[W_J_T]

I thought this was concluded above, I’m not denying that the app itself doesn't foster this workflow, or that it in fact lacks in providing users proper inherent tools for native modern approaches.

So sure one could surmise that DW users are funneled into said workflow. However to me, the OP statements throughout this thread, don't appear to be lumped into this same assumption based upon their own chosen words and statements.

[B i r n o u]

read #29

[W_J_T]

Likewise re-read #39, in-particular these two items “I though this was concluded above”, “to me”, but carry on if you feel you must. However unless the OP feels compelled to clarify its a mute point to carry on further.

Alternatively since it was reworked in bootstrap, we could be discussing why the person whom was hired by the OP used BS3 and not BS4? But that too seems it would garner silly discussions. So in the end, it appears the OP has found possibilities that they can work with to accomplish what it is they were seeking.

[carol mcgann]

At the risk of garnering silly discussions...the responsive template he wrote for me was done last year, hence the old version. My attempt to integrate my site into it resulted in enough frustration that I put it all aside. My question about tables comes up because I'm back at it. I will succeed sometime!

[Paul-M]

<style>

    body {

  font-family: "Open Sans", sans-serif;

  line-height: 1.25;

}

table {

  border: 1px solid #ccc;

  border-collapse: collapse;

  margin: 0;

  padding: 0;

  width: 100%;

  table-layout: fixed;

}

table caption {

  font-size: 1.5em;

  margin: .5em 0 .75em;

}

table tr {

  background-color: #f8f8f8;

  border: 1px solid #ddd;

  padding: .35em;

}

table th,

table td {

  padding: .625em;

  text-align: center;

}

table th {

  font-size: .85em;

  letter-spacing: .1em;

  text-transform: uppercase;

}

@media screen and (max-width: 600px) {

  table {

    border: 0;

  }

  table caption {

    font-size: 1.3em;

  }

  table thead {

    border: none;

    clip: rect(0 0 0 0);

    height: 1px;

    margin: -1px;

    overflow: hidden;

    padding: 0;

    position: absolute;

    width: 1px;

  }

  table tr {

    border-bottom: 3px solid #ddd;

    display: block;

    margin-bottom: .625em;

  }

  table td {

    border-bottom: 1px solid #ddd;

    display: block;

    font-size: .8em;

    text-align: right;

  }

  table td::before {

    content: attr(data-label);

    float: left;

    font-weight: bold;

    text-transform: uppercase;

  }

  table td:last-child {

    border-bottom: 0;

  }

}

    </style>

</head>

<body>

<table>

  <caption>

  Accounts Summary

  </caption>

  <thead>

    <tr>

      <th scope="col">Account</th>

      <th scope="col">Due Date</th>

      <th scope="col">Amount</th>

      <th scope="col">PERIOD</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td data-label="Account">JOE BLOGGS</td>

      <td data-label="Due Date">04/10/2018</td>

      <td data-label="Amount">1,090</td>

      <td data-label="Period">03/08/2018 - 03/09/2018</td>

    </tr>

    <tr>

      <td scope="row" data-label="Account">JOHN SMITH</td>

      <td data-label="Due Date">03/10/2018</td>

      <td data-label="Amount">2,653</td>

      <td data-label="Period">02/08/2018 - 02/09/2018</td>

    </tr>

    <tr>

      <td scope="row" data-label="Account">SARAH JONES</td>

      <td data-label="Due Date">03/10/2018</td>

      <td data-label="Amount">1,171</td>

      <td data-label="Period">02/08/2018 - 02/09/2018</td>

    </tr>

    <tr>

      <td scope="row" data-label="Acount">Visa - 3412</td>

      <td data-label="Due Date">02/10/2018</td>

      <td data-label="Amount">899</td>

      <td data-label="Period">01/08/2018 - 01/09/2018</td>

    </tr>

  </tbody>

</table>

[carol mcgann]

Energize: thanks for this---it looks great, particularly for someone starting anew. I will play with it and see if I can rename things a little and make it work on my existing tables.

[Paul-M]

Energize: thanks for this---it looks great, particularly for someone starting anew. I will play with it and see if I can rename things a little and make it work on my existing tables.

You are welcome