Creating HTML tables with consistent vertical lines and broken horizontal lines

Looking to style an HTML table with unique grid-lines. Wanting continuous horizontal lines (foreground) and interrupted vertical lines (background), overlaid by the horizontal lines. Different line heights, some 1px, others 2px for variety. Vertical lines/borders should be 3px with no space or border on the left and right sides of the table - aiming for a 100% width, left and right justified appearance. The desired result is shown in the attached image link below. Any assistance would be greatly appreciated.

Experimented with border-collapse: separate; and varying border-spacing, unable to achieve different horizontal line heights without adding unwanted borders on the sides.

https://i.stack.imgur.com/NlBRP.jpg

Referencing the snippet for table structure. No changes can be made to the HTML code, fake columns cannot be added.

    <table>
      <thead>
        <tr>
          <th>th-1</th>
          <th>th-2</th>
          <th>th-3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>tr-1, td-1</td>
          <td>tr-1, td-2</td>
          <td>tr-1, td-3</td>
        </tr>
        <tr>
          <td>tr-2, td-1</td>
          <td>tr-2, td-2</td>
          <td>tr-2, td-3</td>
        </tr>
      </tbody>
    </table>

htmlcss

Answer №1

To achieve the effect of horizontal lines overlaying vertical lines (border), you can make use of border-spacing property:

table {
  border-collapse: separate;
  border-spacing: 0px 1px;
}

Next, include an additional space between the thead and tbody sections (inspired by a solution from another stackoverflow thread Spacing between thead and tbody):

thead:after {
  display: block;
  height: 0px;
  content: "";
  border: none;
}

For the complete CSS code and the displayed output, refer to the code snippet below.

table {
    /* Create a border between rows.*/
    border-collapse: separate;
    border-spacing: 0px 1px ;
    background-color: #697a91;
    width: 100%;
}
thead:after {
    /* Increase the border between thead and tbody.*/
    display: block;
    height: 0px;
    content: "";
    border: none;
}
th {
    background-color: #dce0e6;
    text-align: center;
}
th,
td {
    padding: 0.5em;
    border-right: 3px solid white;
}
th:last-child,
td:last-child {
    border: none;
}
td {
    background-color: #eff4f6;
}
<table>
  <thead>
    <tr>
      <th>th-1</th>
      <th>th-2</th>
      <th>th-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>tr-1, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
    <tr>
      <td>tr-2, td-1</td>
      <td>td-2</td>
      <td>td-3</td>
    </tr>
  </tbody>
</table>

Answer №2

Implementing border-collapse: collapse
allows for setting borders to the rows, let's see an example:

body {
    margin: 0;
}
table {
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
table tr {
    background-color: #f4f8f9;
    border-top: 1px solid #78858e;
    border-bottom: 1px solid #78858e;
}
table tr:first-child {
    background-color: #e1e7e7;
    border-bottom: 2px solid #78858e;
}
table td {
    border-right: 3px solid white;
}
table td:last-child {
    border-right: none;
}
<table>
    <tr>
        <td>1</td>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
        <td rowspan="2">4</td>
    </tr>
    <tr>
        <td>5</td>
    </tr>
    <tr>
        <td>7</td>
        <td>8</td>
    </tr>
</table>

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

Manipulating layout with html5 VIDEO controls

I'm having an issue with the HTML5 video element. When I don't use "Controls," it displays with the border-radius as I specified. https://i.stack.imgur.com/KMEeJ.png However, when I add controls (which I need), an ugly border appears and overri ...

htmlvideo

Tips for inserting values into a string array using jQuery or Angular 7

I have a series of checkboxes with values obtained from a loop. Instead of pushing these values into an array, I need to join them together as "parent1", "parent2", "parent3" and display the result in the console. Below is the code snippet for reference: ...

jqueryhtmlangular

Dealing with challenges in integrating ngx-masonry with Angular 14

I am currently working with Angular 14 framework and the ngx-masonry library (https://www.npmjs.com/package/ngx-masonry/v/14.0.1). However, I am facing some issues where it is not functioning correctly. I would appreciate any assistance or guidance on how ...

htmlcssangulartypescriptnpm

The collapsible navbar vanished, where did it go?

While experimenting with the carousel template page, I noticed that the NavBar collapses when the screen width is reduced below a certain pixel size. Initially, everything was working fine as intended. However, after making some modifications to the carou ...

htmlcsstwitter-bootstrap

Align an Image Vertically Using Bootstrap's Grid System

Hey there! I've been trying to center an image within a "div" tag using Bootstrap, but despite my best efforts and reading through various resources, I haven't been able to crack it. * { margin: 0; padding: 0; } .people-one { w ...

htmlcssalignmentbootstrap-5

Why is the feedback section showing a horizontal scrollbar?

I'm puzzled as to why a horizontal scrollbar is appearing in the feedback section. I've examined the elements but can't seem to pinpoint the issue. ...

csshtmlscrollbar

the side panel is positioned under the main content

Can anyone help me figure out why my sidebar is not positioning correctly next to the content on the right side? No matter what I try, it keeps going underneath the content. Here's the CSS code I'm using: body { font: 10pt Calibri, Helvetica ...

htmlcss

Creating a div that displays only the initial 50 characters through CSS

My goal is to display only the first 100 characters of the Optional Clause in my card, but I'm running into problems with the CSS. The following 3 lines of code aren't working for me: white-space: nowrap; overflow: hidden; text-overflow: ellipsis ...

htmlcssstyling

Load the data from amp-list after triggering an event

I am currently exploring ways to load data on my second amp-list only after the first one has a selected value. Additionally, I am struggling to display a placeholder for the second amp-list. <div class="row"> <div class="col-sm-4 position-in ...

htmlamp-html

Tips for customizing the timing of a Bootstrap modal's opening delay?

I have integrated gem "bootstrap-sass", "~> 2.3.0.0", which indicates that I am utilizing Bootstrap 2. Detailed information on the modal can be found here. The code for my custom modal looks like this: #Modal.modal.hide.fade{"aria-hidden" => "true" ...

javascriptcssruby-on-railstwitter-bootstrapmodal-dialog

When you print, transfer HTML tags to a separate page

I need help with writing a report that pulls data from a dynamic database. I added code to force a page break after every second div tag, but since the content is constantly changing, some div tags end up spanning across pages when printed. Is there a way ...

htmlcss

Struggling to get JavaScript to successfully load a .txt file in order to load various links

I created a cool feature that takes users to a random link, but I currently have a large list of links and wanted to find a way for JavaScript to read them from a text file. The code I have tried so far is not working, and I have experimented with other s ...

javascripthtml

How to enlarge the size of specific letters in HTML

I am looking to enhance the values of C and I. In addition, I am utilizing ::first-text{}. This is currently functioning well. Now, the question arises - how can I elevate the value of I. <p>Creating and Implementing</p> <center> < ...

html

Is there a way for the React select component to adjust its width automatically based on the label size?

After defining a React select component, it looks like this: <FormControl> <InputLabel id="demo-simple-select-label">Age</InputLabel> <Select labelId="demo-simple-select-label" id=&quo ...

javascripthtmlcssreactjsmaterial-ui

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

Adjust background image size to fit the screen, not just the content

Whenever I set the background image for each page using the following JavaScript code, var imageUrl = 'url(' + imageUrl + ') top left no-repeat fixed'; $('body').css({ 'background': imageUrl }); I also add ...

javascriptjqueryhtmlcssmobile

How to Align a Footer to the Bottom of the Page using Bootstrap 5

My issue arises when using a dark background footer, as some pages lack enough content to fill the entire browser's viewport. Consequently, an unsightly white band appears below it. How can I ensure the footer reaches the bottom of the viewport on pa ...

htmlcssbootstrap-5

Preserve the video's aspect ratio within a fixed height and width layout by utilizing CSS styling

I am currently in the process of developing a web application with a fixed height layout that does not utilize flexbox and is also limited by width constraints. My goal is to divide the screen in half both vertically and horizontally, around 50% for each ...

csshtmlvideoresponsive-design

Issues encountered when incorporating personalized CSS into a Vuetify element

Working with the Vuetify selector input component, v-select, and wanting to customize its style led me to inspecting it in Chrome and copying down the necessary classes. For instance, to change the font size of the active value, I utilized: .v-select__sel ...

javascripthtmlcssvue.jsvuetify.js