Can a callout or indicator be created when a table breaks across columns or pages?

As we develop HTML pages for printing purposes, one specific requirement for tables is to include an indicator like "Continues..." below the table whenever a page or column break occurs. Additionally, in the header of the continuation of the table, we need another indication such as the table title followed by the text "Continued," before resuming with the regular content flow.

Our plan is to utilize CSS multi-columns for the top-level container and the standard HTML table element for the table itself. However, it appears that CSS columns do not provide any built-in pseudo-classes for styling the column breaks.

Below is the desired layout:

https://i.stack.imgur.com/QaWKA.png

javascripthtmlcsscss-selectors

Answer №1

My suggested approach would be as follows:

  • Place a hidden div above the table

<div id="cont-label" style="display:none;">Continues...</div>

  • Determine the size of the table

You can achieve this by either sending its size to the UI or fetching it using JavaScript:

var size = $('#mytable tr').length;

The size can then be stored in a JavaScript variable or within a data attribute in the table's div, such as data-size=12

  • Check if the table is "chopped"

If the number of rows displayed on the home page is less than the total size of the table, you can determine this by counting the rows or having a fixed number of displayed rows (depending on your design). Let's assume the displayed size is displayedSize.

  • Comparison and action

It is recommended to utilize jQuery for this step. Retrieve both the values of size and displayedSize, then compare them:

if( displayedSize < size ){
  $("#cont-label").show();
}

I am assuming that the next page always includes the text "Continued," as displaying the entire table rather than just a portion simplifies implementation. Please correct me if my assumption is incorrect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

PHP Administrator Access

When a user logs in as an admin on my website, I want certain options to be available. My concern is ensuring the security of this admin account. Currently, after the login process is authenticated, I set $_SESSION['status'] = 'authorized&ap ...

phpjqueryhtmlauthenticationuser-accounts

implement django self,pk post-save success function

It might seem unconventional, but I'm attempting to utilize a primary key (pk) in a success function to generate a href for loading. The pk will be new and generated by the save() method. What I would like to know is how to send the self.pk pack to t ...

javascriptpythonajaxdjango

Angular app sends a JSON request and receives no data in response

It seems like Angular may be loading the page before fully receiving all the information from JSONP. There are times when refreshing the page multiple times eventually displays the information, but it's not consistent. Interestingly, the code used on ...

javascriptjsonangularjsbehance-api

Integrating data between Java and JavaScript within the Wikitude platform is essential for leveraging AR.RelativeLocation

After passing an integer from Java to JavaScript, I am attempting to use the value to adjust the altitude of an object. I included the variable in RelativeLocation var location = new AR.RelativeLocation(null, 8, 0, a); The issue arises when it disregards ...

javascriptandroidwikitude

Attempting to download an image through an axios fetch call

There is an issue I am facing while trying to retrieve an image from the website www.thispersondoesnotexit.com. function getImage() { axios({ method: 'get', url: 'https://www.thispersondoesnotexist.com/image' }) ...

javascriptnode.jsimageaxios

Reposition and resize an image. Creating a grid layout

I'm having trouble with positioning and cropping an image correctly on my website. I want it to look like this (hero-section): The entire project is based on a grid layout. I need a circular image that is larger than the container, positioned to the ...

htmlcssimagegridcss-position

Using Vue Js directive to implement a Select2 component

I've been exploring the example of the Vue.js wrapper component and trying to customize it to use a v-select2 directive on a standard select box, rather than creating templates or components for each one. You can view my implementation in this JS Bin ...

javascriptvue.jsjquery-select2vuejs2

What is the method for determining if a given point falls within a 3-dimensional cube?

I am currently seeking a method to determine whether a location is situated inside a rotated cube. To provide some context, I have access to the coordinates (x,y,z), rotation values (x,y,z), and dimensions (x,y,z). I am working with Javascript for this pr ...

javascriptnode.jsmathlocationcube

JS Emphasis on Scrolling Div

I'm facing an issue with a button that opens a scrollable div. When I try to use the arrow keys on the keyboard, they do not scroll the div as expected. Interestingly, if I click anywhere on the div, then I am able to scroll using the arrow keys. I ...

javascriptjqueryhtml

Leveraging $this in conjunction with a jQuery plugin

I'm experimenting with a code snippet to reverse the even text in an unordered list: $(document).ready(function () { $.fn.reverseText = function () { var x = this.text(); var y = ""; for (var i = x.length - 1; i >= 0; ...

javascriptjqueryhtml

"In a single line, add an item to an array based on a specified condition

I am trying to achieve something similar in JavaScript with a one-liner. Can this be done without using an if statement? // These versions add false to the array if condition = false let arr = await getArray(params).push(condition && itemToAdd); arr = awai ...

javascriptarrays

What is the reason behind localStorage.getItem consistently returning a string value?

Something strange is happening. In the lib.dom.d.ts file, the type for localstorage.getItem shows as 'string | null', but in my app it always returns a string. Why is this discrepancy occurring? ...

javascripttypescript

Executing a Knex RAW MySQL query to insert new records into a database table

As someone new to working with MySQL, I have previously used PSQL in a similar manner. However, the following code is generating an error. return await db .raw( `INSERT INTO users(firstName, lastName, email, ...

javascriptmysqlnode.jsexpressknex.js

Change the behavior of a submit button to trigger a custom JavaScript function instead

I am faced with a challenge where I need to override the default functionality of a button in code that cannot be altered. Instead, I must ensure that when the button is clicked, a custom JavaScript method is called rather than submitting the form as it no ...

javascriptform-submitcode-injectionsubmit-button

Modify the title attribute within a span tag in PHP using AJAX

I'm currently working with Zend Framework 2 and I have a requirement to translate a string in my index.html file, which displays a tool tip when hovering over a span tag. The challenge I face is that this value needs to change dynamically after perfor ...

phphtmlajaxzend-framework2

When additional lines are drawn elsewhere on the HTML5 Canvas, the diagonal lines will gradually appear thicker and more pronounced

For horizontal and vertical lines, using a translation of 0.5 for odd stroke widths results in crisper and sharper lines. But what about diagonal lines? Link to jsfiddle <!DOCTYPE html> <html lang="en"> <body style="background: black"& ...

javascripttypescriptcanvasgraphicshtml5-canvas

How to organize and reuse code efficiently with Node.js, EJS, and front-end JavaScript?

It seems that I may have chosen the wrong platform by posting this question on the 'Software Engineering' exchange: Currently, my focus is on learning the MEAN stack (I have yet to dive into Angular, so for now I am using pure vanilla JS for the ...

javascriptnode.jsejsdry

Is it illegal to escape quotes when using an image source attribute and onerror event in HTML: `<img src="x" onerror="alert("hello")" />`?

Experimenting with escape characters has been a fascinating experience for me. <img src="x" onerror=alert('hello'); /> <img src="x" onerror="alert(\"hello\")" /> The second code snippet triggers an illegal character error ...

javascripthtml

When you hover over the image, the text will disappear

When I hover over the image of LTC, a thumbnail appears with text and a button. However, I do not want the text "LTC" to be shown when hovering over the image. <div class="col-md-4"> <div class="view view-eighth"> <div class=" ...

htmlcss

Encountering a Problem When Exporting a Class Using Require

I find myself struggling with a particular detail that eludes me. Despite exploring numerous suggested solutions found through Google, I am overwhelmed by the uncertainty of what actually works. Here is MyProject on Replit and the problematic class I&apos ...

javascriptnode.jsecmascript-6es6-moduleses6-class