What is the best way to eliminate a vertical line from an HTML table?

I am looking to remove specific vertical lines from an HTML table. There are only 3 vertical lines in total, and I want to remove the first and third lines.

Below is my code:

<html>
<head>
<style type="text/css">
.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

}
table, th, td {
  border-left: none;
  border-right: none;
}
</style>
</head>
<body>
   <div id="div1" class='display'>

           <table  width="100%" border="1" align="center" cellpadding="0" cellspacing="1" bordercolor='66A8FF'>
           <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            </table>
               </div>
</body>
</html>

Here is my JSFiddle

Any suggestions on how I can achieve this?

Thank you in advance!

htmlcss

Answer №1

Interactive Demo

Here is an example of how to use CSS to style a table:

table{
    border-collapse:collapse;
}
td:nth-child(2){
    border-right:1px solid white;
}

Answer №2

Here is the code you requested:

     <div id="div1" class='display'>

       <table  width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bordercolor='66A8FF'>
       <tr class="table1" style="border-collapse:collapse">
       <td   width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
       <td class="remove_line"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
        <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
         <td class="remove_line1"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
        </tr>
        <tr class="table1" style="border-collapse:collapse">
       <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
       <td class="remove_line"  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text2</font></td>
        <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
         <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
        </tr>
        </table>
           </div>

Also, here is the CSS for this:

.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

 }
table, th, td {

}
.remove_line{
border-right:2px solid red;    
}

Answer №3

Apply a border-right of 2px solid #FFF to the second td class.

Here's an example:

<html>
<head>
<style type="text/css">
.table1{

 background: -moz-linear-gradient(-90deg, #003471, #448CCB);
 background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));

}
table, th, td {

  border-right: none;
}
.set_border
{
border-right:3px solid #FFF;
}
</style>
</head>
<body>
   <div id="div1" class='display'>

           <table  width="100%" border="1" align="center" cellpadding="0" cellspacing="0" bordercolor='66A8FF'>
           <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px" class="set_border"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px" ><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            <tr class="table1" style="border-collapse:collapse">
           <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text1</font></td>   
           <td  width="25%"  height="48px" align="center" style="font-size:28px" class="set_border"><font color="#fff">Text2</font></td>
            <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text3</font></td>  
             <td  width="25%"  height="48px" align="center" style="font-size:28px"><font color="#fff">Text4</font></td>   
            </tr>
            </table>
               </div>
</body>
</html>

Answer №4

While SW4 may not have exactly what you're looking for, here are some additional notes to consider:

  • Maximize the use of CSS for better readability and easier code modifications.
  • Be cautious when overriding standard tags; consider using different table classes like .table1 td instead of just td. Reserve tag overrides for css resets only.
  • Consistent indentation enhances code readability. Tools like Sublime Text with shortcuts like Ctrl+Shift+r can help with reindenting similar codes.
  • Utilize external CSS style sheet files as outlined in sites like this one to further improve file readability.
  • Learn more about CSS Selectors from resources like here.

CSS

.table1{
    background: -moz-linear-gradient(-90deg, #003471, #448CCB);
    background: -webkit-gradient(linear, left top, left bottom, from(#003471), to(#448CCB));
    border: 1px solid #66A8FF;
}

table, th, td {
    border-left: none;
    border-right: none;
}

td {
    font-size:28px;
    color: #fff;
    text-align: center;
    height: 48px;
}

table{
    border-collapse:collapse;
}

td:nth-child(2){
    border-right:1px solid white;
}

HTML

<table  width="100%" border="1" align="center" cellpadding="0" cellspacing="1">
    <tr class="table1" style="border-collapse:collapse">
        <td  width="25%">Text1</td>
        <td  width="25%">Text2</td>
        <td  width="25%">Text3</td>
        <td  width="25%">Text4</td>
    </tr>
    <tr class="table1" style="border-collapse:collapse">
        <td  width="25%">Text1</td>
        <td  width="25%">Text2</td>
        <td  width="25%">Text3</td>
        <td  width="25%">Text4</td>
    </tr>
</table>

JSFiddle

Check out this JSFiddle link for a demo

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

tips on toggling div visibility based on data filtering

<script> function toggleContent(str) { if(str == 'recent' || str == 'old' && !($(".main_content").is(':visible'))) { $(".main_content").show(); } else if( str == 'newComment') { ...

htmlhideshow

Introducing the World of Wordpress Blogging

How can I create an introduction on my WordPress site similar to the one found at ? I am specifically interested in incorporating the expanding horizon line effect. It seems like it may just be a GIF that plays and then fades into the homepage. Are there ...

javascriptjquerycsswordpressgif

PHP DOMDocument - Script tag containing Chinese characters is improperly formatted

Can anyone help me figure out why my PHP DomDocument is converting Chinese characters inside a script tag to strange symbols in the output? <?php $html = <<<EOD <!DOCTYPE html> <html> <head> <script> ...

phphtmldomdomdocument

Static list elements are utilized in the CSS drop-down menu

It may appear that my coding skills are lacking or incorrect. When I attempt to create a drop-down menu in CSS, the new list elements end up on the other side of the page instead of within the container box. How can this be fixed? Below is the code snippe ...

htmlcss

Expanding a div's size with CSS to fill the remaining space

Here's the setup I'm working with: <div class="parent"> <div class="moverBoy"></div> <div class="smartBoy"></div> </div> The parent element is fixed at 100x20 indefinitely. moverBoy and smartBoy are al ...

javascripthtmlcss

Can you tell me why one of these Sass codes is throwing an invalid CSS error while the other is not?

My code: @for $j from 1 to 6 { .text-#($j) { font-size: 15px * $j; } } I'm facing an issue where my code doesn't run as expected. In an attempt to fix this, I modified it to use a 'through' keyword instead of 'to' in the loop ...

htmlcsssass

There is an issue with my HTML due to a MIME type error

I am currently facing an issue with my project. I have developed a node js server and now I want to display an HTML file that includes a Vue script loading data using another method written in a separate JS file. However, when I attempt to load the HTML f ...

javascripthtmlnode.jsvue.js

Assigning alphanumeric characters to the axis for identification purposes

review the code in index.html <!DOCTYPE html> <html> <head> <title>D3 test</title> <style> .grid .tick { stroke: lightgrey; opacity: 0.7; } .grid path { stroke-width: 0; } .ch ...

javascripthtmlcsssvgd3.js

The image hover feature is not functioning as expected in Angular 4

Currently, I am involved in a project using Angular 4. One particular section involves changing images on hover. Although I have implemented the following code, it does not seem to be functioning correctly for me. Interestingly, the same code works perfect ...

jqueryhtmlangular

experiencing a problem with the scrollTo() function

I am encountering difficulty in finding the correct X and Y coordinate values to move an image using mouse scroll within a div. I have included my sample code below. I have successfully managed to scroll the image without using a div. Can anyone assist m ...

javascripthtml

What happens to the content within a <textarea> element if it is not enclosed between the opening and closing tags?

Here's a puzzling situation - I've entered the word Hello. into a <textarea>, and while I can see it on my screen, it doesn't show up between the opening and closing <textarea> tags. It may seem like a simple issue, but I'v ...

javascripthtmltextarea

The slides on my Bootstrap carousel are failing to display

I attempted to study a Bootstrap carousel code for better understanding, but unfortunately, the slides are not functioning correctly. The first slide remains static without any movement. Any suggestions on how to resolve this issue? Below are the HTML and ...

htmlcsstwitter-bootstrapbootstrap-4

Android Gmail Application: Implementing 1px horizontal spacing between inline images placed within <td> tags

Have you ever noticed that in the Android Gmail app, there can be a mysterious 1px gap between inline images? This little pixel problem can sometimes push the rightmost image outside the comfy frame of your email. It seems this glitch prefers images of cer ...

androidhtmlemailgmail

What is the best method for fetching the values of a select element in React.js?

I'm struggling to retrieve the value of a selected element in a dropdown list. I've tried debugging it, but haven't been able to get the value. I attempted to console log e.target.value, but unfortunately, it didn't work. Any thoughts o ...

javascripthtmlreactjs

Need to adjust the layout of PHP form

Snippet of code: echo "<form method ='post' action='NextFile.cgi'>"; echo "<table>"; echo "<tr><td>Date: </td></td> <input type='date' name='Date' value =".$record['Date& ...

phphtmlformslayout

Tips for setting up an automated system to check feeds

While I have experience parsing and setting up databases in PHP, I am now faced with the challenge of constantly monitoring an XML feed for a specific string within one of the tags. Each time this string is detected, I need to add the entire XML item (incl ...

phphtmlxmlparsingfeed

What are the advantages and disadvantages of using the picture element in web design?

What advantages and disadvantages come with using the HTML5 picture element? Specifically, does the browser download all images or only the image that matches the media query? ...

htmlimageperformancepicture-element

What steps should I take to make my Twitter widget adaptable to varying screen heights?

I'm currently utilizing react-twitter-widgets to incorporate a Twitter timeline within my application. While everything is rendering correctly, the height of the timeline extends down the entire page. Is there a way to adjust the widget's height ...

cssreactjstwitterbootstrap-4

How can a button be linked directly to a particular list item?

I currently have a HTML tag within my React application that looks something like this: <ul> <li> Item 1 <button> Delete </button> </li> <li> Item 2 <button> ...

javascripthtmlreactjs

Switching the position to fixed causes it to lose its justification functionality

My goal is to create a table using div elements. However, when I set the header to have a fixed position to prevent it from disappearing when scrolling through more data, all the header cells shift to the right. I attempted to adjust the margin-left proper ...

htmlcss