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

Unexpected behavior with first-child selector in a simple CSS code

It seemed so clear to me, but it turns out I was mistaken. Check out this link $('p:first-child').css({color:'red'}); The color of all text is not being altered. <div class="post text"> <a href="#">this is a url</a> ...

jqueryhtmlcss

Modifying the color scheme of the table background and text

After finding a code example online to assist with creating a table in my project, I am faced with the challenge of changing the background color of the white rows to match the dark blue used for others. Additionally, I cannot figure out how to change the ...

htmlcsshtml-table

Building a local database using the MVC framework concept

Can a locally stored database be developed using MVC framework principles in javascript and html5? Thank you Ravindran ...

javascriptdatabasehtmljavascriptmvc

Issues with Carousel Plugin Functionality

**Hey everyone, I could really use some help. As a beginner coder, please forgive any errors in my code. I am currently working on a webpage where I need to incorporate a carousel plugin within a panel body to display the latest photos. The code provided ...

jqueryhtmlcsstwitter-bootstrap

Explore by the anchor tag

I've recently implemented a search bar utilizing Bootstrap. This is the code for the search bar: <div class="md-form mt-0"> <input class="form-control" id="myInput" type="text" placeholder="Sear ...

javascripthtmljquerybootstrap-4

Deactivate while maintaining menu options

Currently, I have a Vue.js form that manages adding and updating data for patients. The issue at hand involves a <select> tag which allows for the addition of a relative. This select field is populated by an array called PPrelations, which is sourced ...

htmlasp.netvue.js

What is the best way to align div elements side by side while using a flex direction of column?

I need help aligning the text input next to the h1 tag, inline, and then displaying it as a flex-direction of column. Currently, all inputs are being set in a line with the h1 on top which is not the intended layout. Here is an illustration: This is how ...

htmlcssreactjs

Steps for layering three images with distinct red, green, and blue components using HTML and CSS

Is it possible to overlay three versions of an image, each with red, green, and blue components, in order to recreate the original image using only HTML and CSS? I have tried this HTML setup: <div id="container"> <img class="color" id="red" ...

htmlcsscolors

Steps for adding a navbar that slides horizontally and overlaps other links on a webpage

I am attempting to design a sliding navigation menu using JQuery. The concept involves having multiple main sections, each with several subsections. When a user hovers over a section, the subsections will expand horizontally. If another section is current ...

jqueryhtmlcssnavbar

Guide to dynamically add data to two columns

I have a challenge with organizing multiple inputs into rows with two columns each, ensuring that each input is appended to the appropriate side (50% for each column unless there's an odd number of inputs). Currently, the inputs are being added to se ...

javascriptjqueryhtml

Creating dynamic web content using KaTeX and Node.js

When I attempt to display a complex formula using HTML and CSS, I encounter difficulties. Instead of the desired output, my screen is filled with confusing unicode characters. To resolve this issue, I decided to use KaTeX. I downloaded KaTeX into the dire ...

javascripthtmlnode.jskatex

There seems to be a clash between Modal Semantic UI React and Bootstrap causing issues

I created a project using .net core MVC. I have integrated the semantic-ui-react modal by importing its library and linking the CSS for it to function properly. However, I encountered an issue where the bootstrap CSS was conflicting with the CDN for semant ...

htmlcsstwitter-bootstrapreactjs

The AudioContext feature is functioning properly on Google Chrome but experiencing issues on Safari

In Safari, I understand that audio context needs to be created after user interaction. Despite this knowledge, the code below still didn't produce the desired result. HTML <button onclick="play">Play</button> Javascript functio ...

javascripthtmlsafariaudiocontext

Automatically updating markers on Google Maps v3

I'm utilizing the capabilities of Google Maps V3 to showcase various pins. My goal is to update these markers periodically without interfering with the current location or zoom level on the map. I aim for the markers to refresh every x seconds. How c ...

jqueryhtmlajax

Having trouble getting the Facebook Like Box to function properly

I am having trouble displaying the like box on my website. I followed the code provided at https://developers.facebook.com/docs/plugins/like-box-for-pages and even tried using the HTML5 version, but nothing appears on the page. This is the code I used: & ...

htmlfacebookplugins

splitting up the lengthy list into manageable chunks according to the screen dimensions

How can I make the blue color row-based list (the divs inside a div with id phrase) break on the next line based on the screen size? Any suggestions on additional changes needed in the following CSS? #phrase { color: #fff; position: ...

htmlcss

When an option is selected in one dropdown, a list is dynamically populated in another dropdown. However, the entire column then displays the selected row's options in a table format

https://i.stack.imgur.com/q7tMT.png Upon selecting an option from a dropdown within a table row, I make a call to an API to fetch a list of strings into another dropdown field for that specific row. However, the entire column is being populated with that r ...

javascripthtmlangularjsdomparent-child

Determine the state of the checkbox property in HTML

Is there a way to conditionally set the checked property of a checkbox? In my application, I have checkboxes for each row. The database includes a column 'IsSaved' with values of either 0 or 1. If 'IsSaved' is 1 for a particular row, I ...

angularjshtmlcheckbox

Adding a space after a comma automatically upon saving changes in VSCode

Whenever I input code (t,s) into the system and make changes to it, it automatically transforms into (t, s) with an added space after the comma. Is there a way to avoid VScode from adding this extra space on its own? ...

javascripthtmlvisual-studio-code

Is it possible to create editable Word documents programmatically in ASP.NET?

The goal is to create proposal documents that can be easily modified in Word before sending them to customers. Most of the proposal content will come from existing HTML website material (CMS) and some custom content for specific situations. Conditional lo ...

asp.nethtmlms-word