Creating an HTML table with collapsed borders and hidden rows/columns using the `border-collapse

I am facing a situation where I have a table with multiple lines as shown below:

<table>
   <tr id="line1"><td>Line</td><td>1</td></tr>
   <tr id="line2"><td>Line</td><td>2</td></tr>
   <tr id="line3"><td>Line</td><td>3</td></tr>
</table>

My objective is to dynamically remove a specific line, for example #line3, by setting its visibility to collapse using JavaScript:

document.getElementById("line3").style = "visibility:collapse";

One challenge I am facing is that #line3 has a border-top property defined as follows:

<style>
   table {
      border-collapse: collapse;
   }
   #line3 {
     border-top:1px solid black;
   }
</style>

The issue arises when collapsing #line3 as the border persists, even though the element is hidden. This behavior could be attributed to the border-collapse property inheriting a border from the previous tr element. Is there a solution to address this problem?

EDIT: I prefer to retain the existing JavaScript implementation. While removing and re-adding the style element is an option, I am looking for an alternative approach to resolve this issue.

javascriptcsshtml-table

Answer №1

Removing and then re-adding the style element is definitely an option.

It seems like avoiding any changes to the border-top property when adjusting the row's visibility is your preference, correct?

In this scenario, it appears that using display:none instead of visibility:collapse[1] is your only choice, even though this might lead to the undesirable wobbliness that visibility:collapse aims to prevent.

[1] The behavior specified in https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering is somewhat unclear, but it seems to align with the result you wish to avoid. Additionally, Chrome and Firefox exhibit slightly different behaviors in the case of visibility:collapse. See https://jsfiddle.net/dgrogan/gLqo9s4w/2 for an example.

let visible = 1;
toggle.onclick = function() {
  line3.style.visibility = visible ? "collapse" : "visible";
//line3.style.display = visible ? "none" : "table-row";
  visible = !visible;
}
   table {
     border-collapse: collapse;
   }

td {
  border: 1px solid lime;
}

   #line3 {
     border-top: 2px solid black;
   }
<table>
  <tr id="line1">
    <td>Line</td>
    <td>1</td>
  </tr>
  <tr id="line2">
    <td>Line</td>
    <td>2</td>
  </tr>
  <tr id="line3">
    <td>Line</td>
    <td>3</td>
  </tr>
</table>

<br><br>
<button id=toggle>toggle</button>
<P>
https://drafts.csswg.org/css-tables-3/#visibility-collapse-track-rendering
</P>

Answer №2

Have you attempted using the CSS property "display: none"?


     document.getElementById("line3").style = "display: none";

Alternatively, you might consider setting the border-top to 0 as another way to conceal it.


    document.getElementById("line3").style = "visibility:collapse; border-top: 0";

Answer №3

.cssText

To modify the entire inline [style] attribute, you can utilize the .cssText property:

document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";

With this approach, you can specify the values for visibility and border (and additional properties if needed) in a single line of code.

Demo

document.getElementById("line3").style.cssText = "visibility:collapse; border-top:0px";
table {
  border-collapse: collapse;
}

#line3 {
  border-top: 1px solid black;
}
<table>
  <tr id="line1">
    <td>Line</td>
    <td>1</td>
  </tr>
  <tr id="line2">
    <td>Line</td>
    <td>2</td>
  </tr>
  <tr id="line3">
    <td>Line</td>
    <td>3</td>
  </tr>
</table>

Answer №4

There are multiple ways to accomplish this task using Jquery:

$('#line1').hide();

//OR

$('#line1').css('visibility','collapse');

//OR

$('#line1').css('display','none');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
   <tr id="line1"><td>Line</td><td>1</td></tr>
   <tr id="line2"><td>Line</td><td>2</td></tr>
   <tr id="line3"><td>Line</td><td>3</td></tr>
</table>

You can also achieve the same using Javascript directly by utilizing the getElementById property:

document.getElementById("line1").style.display = "none";

Alternatively,

document.getElementById("line1").style.visibility = "collapse";

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

Organize your information starting from the left and moving to the right

Currently, I am engaged in a project where I need to retrieve commands and showcase them on a screen. However, there seems to be an issue as the commands are appearing one by one and automatically moving down to the footer. What I actually want is for th ...

phphtmlcss

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

VueJS does not update values instantly as they change

I have implemented a JS class with the following code: class Field { public Value = null; public Items = []; public UniqueKey = null; public getItems() { let items = [...this.Items]; items = items.filter((item) => { ...

javascriptvue.js

Counting Slides in a Slick Carousel

I am currently working with the slick carousel in React.js using ES6 and I'm having trouble getting the slide count. In my function, I can successfully retrieve the count inside the event listener but outside it returns null. Can someone point out wha ...

javascriptreactjsslick.js

Problem with Silverstripe: Replicating Site configuration or settings menu

I have duplicated the Settings menu (siteConfig) folder in order to create a new CMS menu for inputting company information. The functionality of the menu is working correctly, however, the CSS styling is not loading properly. Image: https://i.stack.imgur ...

csssilverstripe

Heroku Internal Server Error with NextJs version 5.0.0

Below are the scripts that I am using: "scripts": { "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js", "heroku-postbuild": "next build" }, This is the content of my procfile: web: npm start ...

javascriptreactjsherokudeploymentnext.js

Can this layout be achieved using DIV elements?

Struggling to create a unique HTML/CSS layout that extends beyond the center? Imagine a standard horizontally centered page, but with one div expanding all the way to the right edge of the browser window. This design should seamlessly adjust to window res ...

csslayouthtml

Utilizing API calls within a loop using AngularJS

I need to execute a series of APIs in a loop, but I want the second loop to start only after receiving the result from the last API call in the first loop. How can I achieve this? for(var i=0; i<array.length; i++ ) service.getfunction(array[i]).t ...

javascriptangularjsapifor-looppromise

Storing User Information in Cookies using jQuery

My current jQuery script is linked to a button and it functions by toggling font styles on a website by enabling or disabling a stylesheet upon clicking the button. Now, I want to enhance this functionality by saving user preference to a cookie so that the ...

jquerycsscookiesfonts

Using javascript, how can you fill in the missing dates within an array of objects?

I need to populate this object with dates starting from today up to the next 7 days. Here is my current object: let obj = { "sessions": [{ "id": 0, "available_capacity": 3, "date": "15-05- ...

javascriptarraysjsondateobject

What is the best way to ensure that `col-sm-4` takes up the full space previously occupied by `col-sm-5` when it is hidden

In tablet mode, I am concealing my col-sm-5 using the class hidden-sm. <div class="row"> <div class="col-sm-4"> </div> <div class="col-sm-5"> </div> <div class="col-sm-3"> </div> </div& ...

csstwitter-bootstraptwitter-bootstrap-3

Implement a sequence of animations within a div using jQuery

My goal is to create an animation effect for each div element within a row when the user scrolls down to that specific point on the page. The layout consists of three <div> elements in the same row. The structure of the HTML code is as shown below: ...

javascriptjqueryhtmlanimation

"Transmit the document by utilizing the file ID in the form of

When sending a file from my server, I can easily define the path and it goes through successfully. However, with the node-telegram-bot-api, there is an option to send a document that is already hosted on telegram servers by providing the file_id in the doc ...

javascriptnode.jstelegramtelegram-bot

Encountering a "Element is not defined" error in Nuxt when trying to render Editor.js and receiving

I've been working on creating an editor using Editor.js within my Nuxt project, but it seems like the editor isn't initializing properly when I render the page. import EditorJS from '@editorjs/editorjs'; interface IEditor { editor: E ...

javascriptvue.jsnuxt.js

Issue with CSS min-height causing divs to not align properly

My CSS Code includes media queries to adjust the layout: .clearfloat { clear: both; font-size: 1px; height: 0; line-height: 0; } .box-container { width:100%; text-align:center; } .icon-box { width:32%; max-width:500px; ...

htmlcss

Using Font Awesome icons instead of markers in Leaflet

Within this code snippet, I initially utilized data[key].category to represent the corresponding icon as a marker. However, my intention is to switch to Font Awesome icons for a more lightweight runtime experience in instances where multiple icons may ne ...

javascriptcssleafletfont-awesome

Combining Protractor, CucumberJS, and Gulp-Protractor results in the browser not closing when a test fails

Hello! I am facing an issue with closing the browser when a test fails. Currently, the browser closes successfully when the test passes. The dependencies I am using are: "cucumber": "^0.9.2", "gulp": "~3.9.0", "gulp-protractor": "^2.1.0", "protractor": ...

javascriptseleniumcucumberprotractorgulp-protractor

Eliminate any properties with values that exceed the specified number in size

:) I'm trying to create a function that removes properties with values greater than a specified number. I've searched through multiple resources like this question on how to remove properties from a JavaScript object and this one on removing pro ...

javascript

Unusual behavior of .replace() function observed in Chrome browser

<div> <input type="text" class="allownumericwithdecimal"/>saadad </div> $(".allownumericwithdecimal").live("keypress keyup ", function (event) { $(this).val($(this).val().replace(/[^0-9\.]/g, '')); var text = ...

javascriptjqueryreplace

Passing an array list back to the parent component in ag-grid(Vue) - A step-by-step guide

Currently, I am integrating AG Grid with Vue. My project has a specific requirement where two checkboxes are displayed using a cellRendererFramework. However, I am facing difficulties in fetching the values of these checkboxes from the row definitions. The ...

javascriptvue.jsag-grid-vue