Struggling with adding a border to an HTML table?

I am attempting to create a table with alternating borders on the cells.

After trying the code below, I still can't seem to get the desired effect. The borders are not showing up at all. Can someone provide guidance on how to achieve this?

<style type="text/css">
  .withBorder {
    border: 1px solid black;
  }

  .withoutBorder {
    border: none;
  }
</style>

<table>
  <tr>
    <td class='withoutBorder'> cell1 </td>
    <td class='withBorder'> cell2 </td>
    <td class='withoutBorder'> cell3 </td>
  </tr>

  <tr>
    <td class='withBorder'> cell1 </td>
    <td class='withoutBorder'> cell2 </td>
    <td class='withBorder'> cell3 </td>
  </tr>
</table>
htmlcsshtml-table

Answer №1

To achieve the desired result, ensure that you include border-collapse in your CSS for the table element:

table {
    border-collapse: collapse;
}
.withBorder {
    border: 1px solid #000;
}
.withoutBorder {
    border: none;
}

I have provided a link to a working example on Fiddle.

An alternative approach is to use nth-child selectors in your CSS to simplify your code. This method allows for more concise styling without specifying classes for each table cell. It is adaptable to changes in rows or columns. You can view an updated version of the solution on Fiddle.

table {
    border-collapse: collapse;
}
tr:nth-child(2n+1) td:nth-child(2n+2),
tr:nth-child(2n+2) td:nth-child(2n+1) {
    border: 1px solid #000;
}

Answer №2

Experiment

.withOutline {
    outline: 1px dashed blue;
}

Make sure to specify the style and size before specifying the color of the outline.

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

Exploring elementary functionalities within PHP

I'm just starting out, so please excuse any confusion in how I phrase this. Currently, I'm diving into my online computer science course which is focused on functions. The task at hand is to create sentences that output three different variables ...

phphtmlfunction

Transform the CSS to a Mat-Form-Field containing a search box within it

I am currently working with Angular, Angular Material, and SCSS for my project. Here is the front-end code snippet that I am using: <mat-form-field class="custom-form-field" style="padding-top: 5px;padding-bottom: 0px; line-height: 0px; ...

cssangularangular-material

There is a delay in updating ng-if/ng-hide in real time on the HTML page

Assistance needed for implementing a slight adjustment in AngularJS with TypeScript. The requirement is to change the text of a button for 3 seconds upon clicking, then revert back to its original text. Two HTML elements are created for this purpose, each ...

javascriptangularjshtmltypescript

Ways to easily modify images using a single button with the help of jq

I am new to programming and eager to learn... Currently, I am facing the following problem: I would like to create a functionality where three images can be changed using one button and incorporating fadeIn and fadeOut animations. Essentially, all images ...

javascriptjqueryhtmlcss

Streamline Access to Zimbra Server Automatically

Currently, I am creating a webpage with a login feature at www.newpage.com. Here is the code snippet for reference: <form name="login"> Username<input type="text" name="userid"/> Password<input type="password" name="pswrd"/> <input ty ...

javascripthtmlauthenticationautomationzimbra

Eliminating a pattern with underscore.js or jquery - the complete guide

I am looking to remove the ellipses (...) from a value such as ...India. How can I achieve this using underscore.js, jQuery, or JavaScript? Any tips on how to accomplish this would be greatly appreciated! ...

javascriptjqueryhtmlunderscore.js

Utilizing a responsive design with a bootstrap grid system, featuring expandable columns for

After creating a bootstrap grid page, I am facing an issue with the layout on mobile screens. My problem arises when trying to reorder the cards properly for mobile view. Here is my current logic: <div class="row"> <div *ngFor="let col of [1, ...

htmlangularresponsive-designbootstrap-4bootstrap-grid

Choose an identifier from a CSS class

I've been experimenting with a code pen that I stumbled upon: http://codepen.io/surjithctly/pen/pLDwe When I encase the checkbox in a div with the class "mynav," it stops functioning as intended. How do I implement the specified styling for the check ...

htmlcss

Overflowing text in the div element

Attempting to generate a sample document and aiming to enlarge the font-size by clicking the "Medium" & "Large" button. Encountering an issue where the font-size overlaps with other divs when pressing the "large" button, though not experiencing any proble ...

jqueryhtmlcss

Peek into the Outlook Calendar Event's Source Code

We are interested in analyzing the source code of calendar events in Outlook across all versions from 2010 to 2016 due to its integration with multiple platforms like Google, Exchange, and Exchange Online. Is there a method available to obtain the HTML so ...

htmlemailoutlookcalendarexchange-server

The issue of IE 6 not properly displaying a pop-up div with dynamic data when set to a width of 70%

I am trying to create a pop-up div with dynamic data that is centered on the screen. I have set the height to 300px, width to 70%, and enabled vertical scrolling. When viewing in IE7/IE8, the div appears as intended, centered on the screen with the specif ...

csshtmlinternet-explorer-6width

Is it possible to store an HTML element tag in a variable?

I've been learning JavaScript on w3schools and freecodecamp, but I stumbled upon something in w3schools that has me puzzled. Can someone please explain why this particular code snippet works? The variable "text" is declared as containing the string " ...

javascripthtml

Ways to manipulate the content of a div

HTML <span class = "Box"> <div class = "active"> <a href ="#-night"> <span class ="list">4</span> <span class="locations"><?php echo $location; ?></span> <span ...

htmlcss

What is causing the error message "Error: Cannot update active font: 'Fira Sans' is not included in the font list" in react-font-picker?

For my project, I have implemented a font picker component in the following manner: <FontPicker apiKey={process.env.REACT_APP_GOOGLE_API_KEY} activeFontFamily={activeFontFamilyMobile} ...

javascripthtmlreactjs

Need help inserting an image into the div when the ngif condition is true, and when the ngif condition is false

Essentially, I have a situation where I am using an *ngIf condition on a div that also contains an image. This is for a login page where I need to display different versions based on the type of user. However, I'm facing an issue where the image does ...

javascripthtmlangularangular-ng-if

Execute operations on element itself rather than the output of document.getElementbyId

I encountered an issue involving an HTML element with the ID of BaseGridView. When I call a function directly on this element, everything works perfectly. However, if I use document.getElementById() to retrieve the element and then call the function, it do ...

javascripthtmldevexpress

Can you place 4 table cells in the first row and 3 table cells in the second row?

Exploring the world of HTML and CSS designs for the first time. Here's a code snippet I've been working on: <html> <body> <table width="100%"> <tr> <td width="25%">&#160;</td> ...

html

Default behavior in Fullcalendar 6 allows for rendering links on both days of the month and weekdays

Is there a way to customize the rendering of days and weekdays in Fullcalendar React? Currently, they are displayed as links by default (<a>{dayContent}</a>), but I'm looking to have them rendered as <div> or <span>. Any sugges ...

javascripthtmlreactjsfullcalendarfullcalendar-6

Running nodejs scripts within my HTML and JavaScript code

Using express, I send an HTML file to incoming GET requests: app.get('/', function(req, res) { res.sendFile(path.join(__dirname + '/public/index.html')); }); Within that HTML file, I included another JavaScript file, script.js, us ...

javascripthtmlnode.jsexpress

What is the reason behind the functionality of inline-block?

As a beginner in html and css, I am facing an issue with displaying two h3 elements on the same line. I have tried using display:inline-block, but it's not working as expected. You can check out an example on jsfiddle here. I have provided 4 different ...

htmlcss