zurb / responsive-tables Goto Github PK

Hi guys,

would be better if you wrap the js like this

jQuery(document).ready(function($){

or even better like this

jQuery(function($) {

Hey, maintainer(s) of zurb/responsive-tables!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library zurb/responsive-tables is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "zurb/responsive-tables",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

Your plugin splits the table into two tables, tablesorter still works on the second table, not on the first though. Any ideas on how to solve this?
Tablesorter plugin: http://tablesorter.com/docs/

No scroll bar shows up under the first column if the content is too wide to fit in the content box. I can scroll it with my side-scrolling mouse, but there's no scroll bar like there is in the right column. Also the scrollbar in the right column becomes partially hidden underneath the first column.

Please :)

When shifting from desktop to mobile the rows of data in the table become misaligned, each row becoming gradually more shifted downwards.

Here is the CSS for the responsive table:

table td, table th { padding: 12px 10px; text-align: left; }

/* Mobile */
@media only screen and (max-width: 767px) {
	
	table.responsive { margin-bottom: 0; }
	
	.pinned { position: absolute; left: 0; top: 0; background: #fff; width: 35%; overflow: hidden; overflow-x: scroll; border-right: 1px solid #ccc; border-left: 1px solid #ccc; }
	.pinned table { border-right: none; border-left: none; width: 100%; }
	.pinned table th, .pinned table td { white-space: nowrap; }
	.pinned td:last-child { border-bottom: 0; }
	
	div.table-wrapper { position: relative; margin-bottom: 20px; overflow: hidden; border-right: 1px solid #ccc; }
	div.table-wrapper div.scrollable { margin-left: 35%; }
	div.table-wrapper div.scrollable { overflow: scroll; overflow-y: hidden; }	
	
	table.responsive td, table.responsive th { position: relative; white-space: nowrap; overflow: hidden; }
	table.responsive th:first-child, table.responsive td:first-child, table.responsive td:first-child, table.responsive.pinned td { display: none; }
}

How can I fix this? It's such a prevalent bug that the last row can't even be read.

Huge fan of the library, it's worked great otherwise. Thanks so much in advance!

We can't include and keep this up to date without renaming files which breaks the purpose of using bower-foundation.

Can we get this ported to work with bower please?

It throws the pinned section below the table and keeps the initial table header in place, and no scroll whatsoever, leaving me with a unresponsive table PLUS an extra pinned section obviously breaking the whole page.

Hello everybody,

I have a little question …

Is it possible to change the jquery-code of the „responsive-tables.js“, so that it works with a newer jquery version (3.*)? I would like to prevent to use two versions of jquery.

Thank you in advance!

Sebastian

I'm using this plugin in many tables, each one with +-15 columns. Everything is fine in every browser I test, except iPad. What happens is that some columns are hidden and I can't scroll to see them.

Any idea what I can do?

In the example .html file, on one table thead & tbody is not used. On the next table, only tbody is used.

Kindly refer to the image attached. It seems that the plugin deals badly with merged cells. It does not automatically add empty cells but rather it moves the entire right cells upwards. Making the arrangement totally wrong. I resolve this temporarily by un-merging the cells.

Viewing the examples (on FF12) it seems that the first column can sometimes be unnecessarily wide given the content it contains, which in turn reduces the space available for the scrollable columns.

I suggest instead that there should be a way of specifying a max width (via a data- attribute?) so that if all the content is shorter then it should shrink to the narrowest possible width, or otherwise wrap at the max width.

Or would the above be the default behaviour anyway if a max-width was specified for the column via CSS? If so please update the examples to demonstrate this, as at present they don't.

When the table gets split into two, the column on the left will retain the row that contained the colspan. However the table on the right will be missing the row entirely which causes the two table to be out of sync.

Tables that are hidden (say for example, in a tabbed situation) do get processed by the plugin but the table cell heights are set incorrectly. Can you add a callback to rerun the calculation on an event, i.e. if a tab button is clicked the table cell heights are recalculated.

On my mobile safari browser, there is no way to tell that the table is horizontally scrollable. The scrollbars on the bottom are not visible. Some kind of visual cue indicating the possibility of scrolling action would be great.

I attempted several times to use the code provided, but my table is not getting anywhere. Once, I use the code...

It destroys the article that I am building.

Hi all,

I have one problem as use responsive table with different content size. While I use any problem occur that the table also didn't have same size.
I already try some case but fail:

1. I use html tab ( ) but fail on IE 6+ (The reason that I use zurb 3 is I want my website support for all browser include IE).
2. I use width on

tag with same size but fail also
Anyone to want to help me, please.
Thank you.

Hello,

Adding dynamically rows shows old extra columns that are not expected to be shown.

I have a workaround to solve this:

function splitTable(original)
{
unsplitTable(original);

....

I have added unsplitTable(original); in 26 line

In order to warn responsive table that a change has happened I use:

$(window).trigger('redraw');

I hope this would be helpful.

Regards!

Hi,

We're using Zurb Responsive Tables standalone on a non-Foundation site.

The client has supplied some content which includes table captions.

I've tested this with Zurb Responsive Tables, and, in the mobile view, the caption splits into two table headers which is a bit strange. I'd prefer it to stay above the table, which is the default layout for the caption element.

Here's the relevant subset of our table markup:

<table class="responsive">
  <caption>Table caption</caption>
  <thead>
    <tr>
      <th scope="col">Header 1</th>
      <th scope="col">Header 2</th>
      <th scope="col">Header 3</th>
      <th scope="col">Header 4</th>
      <th scope="col">Header 5</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>-</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>

Thanks,
Dan

Why it doesn't make table responsive when I set window width < 800 and unsplit on >800

The instructions to use this code make no mention of jQuery.

I'm running jQuery 3.1 and it doesn't work.
If i temporarily switch to 2.1 it works OK.
It took me ages to figure this out as I didn't realise jQuery was needed at all.

I tried this for the purpose of making the wp calendar widget responsive. You can see the results here http://thesrpr.com/sidebar-right/

Does quite work. Any suggestions?

Here is another option to add a visual cue. I only want to display the visual cue if scrolling is really necessary when there are several td elements. In my case after 3 ths.

1 ) JQuery that adds a div with a bg-image(visual cue) via css to the responsive table

$("table.responsive").each(function(){
    if ( $("th", this).length > 3) {
        $(this).before("<div style='position:relative;'><span class='MobiScroll'></span></div>");
    }
});

2. CSS to position the div (this goes in the mobile media query )

.MobiScroll {
    background-image: url(image.png);
    width: 62px;
    height: 38px;
    display: block;
    position: absolute;
    bottom: 30px;
    right: 0;
}

Here is a fiddle: http://jsfiddle.net/design4lifeblog/SetvX/

Hello,

I want to use this awesome tool in Foundation 5.
Any possiblity to port this ?

There's also support for Foundation 4 asked... #24

Thanks !

Is it possible for you to add an explicit license for this code? Thanks!

If a cell in the table (in my test it was in the first / header column) contains any break (< br />) tags, the rows then don't line up properly and the column that contains the cell with the < br /> tag will get cut off. Screenshot: http://cl.ly/MiNe

I've got just a few tables that I'm having issues with....it seems to happen only when the first column, which stays pinned has more information than the following columns, which are scrollable.

In this instance, the columns that are scrollable - their rows seem to move up to accomodate for the information presented - regardless of how that affects the associated row in column 1. So - the information in the scrollable columns isn't matching up correctly to the information in the pinned column - and ends up cutting off several cells in the first column.

You can see from the image that I've uploaded that there should be 4 rows (the alternating colors should give you a clue) and as you can see - only 2 images in the first column are showing up - even though there are supposed to be 4.

The problem is my table has many columns and is very wide, so on certain screen sizes it overflows and the plugin does not allow me to set "overflow:scroll" for sizes above 767px (or rather I can't figure out how).

What I want to do is set overflow for screen sizes above 767px and below 1280px. I hope I am explaining myself well :) Any help will be GREATLY appreciated since I am to the point of banging my head against walls. Thanks!

The scrollbar isn't fully visible:

Hi There,

I am looking to implement a responsive table and it’s working as expected…however I noticed a bug that I can’t pinpoint and was wondering if someone could shed some light on the issue. Basically between 768px and 783px the “pinned table” with only column 1 showing is duplicated below the main table. Now the likelihood of a user noticing this is slim (depending on screen width), but I couldn’t find any forums that raise the issue.

Here is the link to the Demo page, shrink your browser window to see: http://zurb.com/playground/projects/responsive-tables/index.html

Here is a screenshot of your demo page to show what I’m talking about:

OS:
Windows 8.1 Pro (64 bit).

Browsers:
Chrome Version 45.0.2454.101 m,
Internet Explorer 11.0.9600.18036
Firefox 36.0.1

Hello,

Upon using responsible table.css and js I see my first column remains scrollable rather than fixed and second and subsequent column are scrollable. Why is it like that?

Please note my td contains hyperlink.

When a responsive table is loaded via an AJAX request it fails to display correctly. I attempt to call 'updateTables' after ajaxComplete, but this does not seem to work either.