Displaying a block of three cells requires the removal of any spacing between them

Question

Displaying a block of three cells requires the removal of any spacing between them

<table cellspacing="1" width="50%" bgcolor="#cccccc">
     <tr class="csstextheader">
     <td>   
     </td>
     <td>Class  
     </td>
     <td>Numbers
     </td>
     </tr>
   <tr class="csstablelisttd">
     <td> 1  
     </td>
     <td>2  
     </td>
     <td>3
     </td>
     </tr>
      <tr class="csstablelisttd">
     <td>  4
     </td>
     <td class='csstdred' > 
     </td>
     <td> 6  
     </td>
     </tr>   
      <tr class="csstablelisttd">
     <td>  7 
     </td>
     <td class='csstdred'>  8
     </td>
    <td>   9
     </td>
     </tr>  
      <tr class="csstablelisttd">
     <td> 10
     </td>
     <td class='csstdred'>
     </td>
    <td>12
    </td>
     </tr>      
   </table>

The task at hand is to eliminate borders from cells with the csstdred class and display them as a block of three cells without any rowspans.

jquery html css

Answer 1

Answer №1

Try using this CSS:

table {border-collapse: collapse;}

View the working example here: http://jsbin.com/ogusaq/1/edit

Update #1:

To include other borders as well, use the following code:

table {border-collapse: collapse;}
td {border: 1px solid #ccc;}
.csstdred {border-color: #f00;}

Updated Fiddle: http://jsbin.com/iwenuw/1/edit

See the Screenshot Below:

Update #2:

If you only want a specific table to be affected, assign the table a class called .redborder:

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}

Fiddle for Reference: http://jsbin.com/ujabav/1/edit

Update #3:

If you wish to change the color to blue when the .csstdred element is clicked, JavaScript is required. Here's the code snippet:

$(document).ready(function(){
  $(".csstdred").click(function(){
    $(this).toggleClass("active");
  });
});

Add this CSS for the active state:

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred.active {border-color: #00f; border-width: 2px 1px 1px 2px; border-collapse: separate;}

Interactive Example: http://jsbin.com/ihejep/1/edit

Update #4

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred div {border: 1px solid #f00;}
table.redborder .csstdred.active div {border: 1px solid #00f;}

Additional JavaScript Functionality:

$(document).ready(function(){
  $(".csstdred").wrapInner("<div>").click(function(){
    $(this).toggleClass("active");
  });
});

Updated Example: http://jsbin.com/abekup/1/edit

Explore More Options in This Updated Version: http://jsbin.com/abekup/5/edit

Answer 2

Try using this CSS:

table {border-collapse: collapse;}

View the working example here: http://jsbin.com/ogusaq/1/edit

Update #1:

To include other borders as well, use the following code:

table {border-collapse: collapse;}
td {border: 1px solid #ccc;}
.csstdred {border-color: #f00;}

Updated Fiddle: http://jsbin.com/iwenuw/1/edit

See the Screenshot Below:

Update #2:

If you only want a specific table to be affected, assign the table a class called .redborder:

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}

Fiddle for Reference: http://jsbin.com/ujabav/1/edit

Update #3:

If you wish to change the color to blue when the .csstdred element is clicked, JavaScript is required. Here's the code snippet:

$(document).ready(function(){
  $(".csstdred").click(function(){
    $(this).toggleClass("active");
  });
});

Add this CSS for the active state:

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred.active {border-color: #00f; border-width: 2px 1px 1px 2px; border-collapse: separate;}

Interactive Example: http://jsbin.com/ihejep/1/edit

Update #4

table.redborder {border-collapse: collapse;}
table.redborder td {border: 1px solid #ccc;}
table.redborder .csstdred {border-color: #f00;}
table.redborder .csstdred div {border: 1px solid #f00;}
table.redborder .csstdred.active div {border: 1px solid #00f;}

Additional JavaScript Functionality:

$(document).ready(function(){
  $(".csstdred").wrapInner("<div>").click(function(){
    $(this).toggleClass("active");
  });
});

Updated Example: http://jsbin.com/abekup/1/edit

Explore More Options in This Updated Version: http://jsbin.com/abekup/5/edit

Answer 3

Answer №2

Modify the tb tag to div in a specific location.

    <td colspan="4" class="custombg">
    <div><p>2</p><p>2</p><p>2</p></div>
    </td>

Answer 4

Modify the tb tag to div in a specific location.

    <td colspan="4" class="custombg">
    <div><p>2</p><p>2</p><p>2</p></div>
    </td>

Answer 5

Answer №3

Only altered the HTML without any changes in CSS.

Please review the updates on this link

Answer 6

Only altered the HTML without any changes in CSS.

Please review the updates on this link

Displaying a block of three cells requires the removal of any spacing between them

Answer №1

Try using this CSS:

View the working example here: http://jsbin.com/ogusaq/1/edit

Update #1:

Updated Fiddle: http://jsbin.com/iwenuw/1/edit

See the Screenshot Below:

Update #2:

Fiddle for Reference: http://jsbin.com/ujabav/1/edit

Update #3:

Interactive Example: http://jsbin.com/ihejep/1/edit

Update #4

Additional JavaScript Functionality:

Updated Example: http://jsbin.com/abekup/1/edit

Explore More Options in This Updated Version: http://jsbin.com/abekup/5/edit

Answer №2

Answer №3

Similar questions

Sorting items within an iFrame using jQuery Sortable

confirming the phone field's character count

Unleashing the Power: Crafting Impeccable For Loops

Add an image to a container

What is the best way to divide widgets in a Wordpress Sidebar?

Issues with CSS functionality

Submitting Forms Across Domains in Internet Explorer

accessing HTML form via XMLHttpRequest (XHR)

How can I use Selenium and Python to locate an element on a webpage and extract its input value?

Display the definitions of entities within the titles of div elements

If the sidebar is not found on WordPress, delete the CSS code

utilizing a Bootstrap modal element throughout multiple HTML documents

Choosing a dropdown option with a CSS Selector

Show JSON response using AJAX jQuery

Issue with mix-blend-mode causing text to not show up on top of the gradient

Applying flexbox to create a visually appealing design

My subsequent page is getting erased by these dynamic page loads

Troubleshooting CSS Hover Not Displaying Properly in Angular 14

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

Using JQuery to switch out images that do not have an ID or class assigned