Delete the rows in a table's column

I used Bootstrap to create a table. The goal was to have a table with rows that have different background colors for each row.

However, I'm facing an issue where there is spacing between the columns when separating the rows.

How can I remove this space, and make sure each row fills the entire line with the background color?

DEMO

.tableTitles {
  text-align: left;
  font-family: 'Noto Sans', sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0;
  color: #4D4F5C;
}

.circle {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  line-height: 32px;
  text-align: center;
  background: #4981C226;
  font-size: 13px;
  font-family: 'Noto Sans', sans-serif;
  letter-spacing: 0;
  color: #4981C2;
}

.tableColor {
  /* background: #F4F5F7 0% 0% no-repeat padding-box; */
  border-radius: 8px;
}

.myTable {
  border-collapse: separate;
  border-spacing: 7px;
}

.tableUserPhoto {
  width: 24px;
  height: 24px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  border-radius: 8px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="card-table table-borderless myTable">
  <thead>
    <tr>
      <th scope="col tableTitles">Title</th>
      <th scope="col tableTitles">Title1</th>
      <th scope="col tableTitles">Title2</th>
      <th scope="col tableTitles">Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
  </tbody>
</table>

Problem

https://i.sstatic.net/juJbt.png

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

border-spacing is a CSS property that requires two values: one for horizontal spacing and one for vertical spacing.

When you specify two values, the first value determines the space between cells in adjacent columns (horizontal spacing), while the second value defines the space between cells in adjacent rows (vertical spacing).

MDN

The goal was to create a table where each row has a distinct background color and stands out individually.

For achieving this effect, consider using the following CSS:

  .myTable{
    border-collapse: separate;
    border-spacing: 0 7px;
  }


.myTable {
  border-collapse: separate;
  border-spacing: 0 7px;
}
<table class="card-table table-borderless myTable">
  <thead>
    <tr>
      <th scope="col tableTitles">Title</th>
      <th scope="col tableTitles">Title1</th>
      <th scope="col tableTitles">Title2</th>
      <th scope="col tableTitles">Title3</th>
    </tr>
  </thead>
  <tbody>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
    <tr style="background-color: grey">
      <td class="tableTitles">
        Title
      </td>
      <td class="tableTitles">
        Title1
      </td>
      <td class="tableTitles">
        Title2
      </td>
      <td class="tableTitles">
        Title3
      </td>
    </tr>
  </tbody>
</table>

Answer №2

You should eliminate the border-spacing property or adjust it to 0px within the style rules for the myTable class.

.myTable{
    border-collapse: separate;
    border-spacing: 0px;
}

Answer №3

The issue at hand is that when using border-spacing, it creates space for both rows and columns unless you provide two specific values (which you aren't doing).

To resolve this, consider the following code snippet:

.myTable {
    border-collapse: separate;
    border-spacing: 0px 7px;
}

This will ensure that there is a 7px gap between each row within the table, while maintaining a 0px gap between columns.

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

Top IDE for web development with HTML5, JavaScript, CSS, and JQuery compatibility, alongside user-friendly GUI design capabilities

Currently, I am working on a project that involves using the RGraph HTML5 canvas package for graph drawing. In addition to this, I also need to create a visually appealing GUI. While experimenting with Netbeans, I found that it lacks the necessary featur ...

javascriptjquery-uihtmlcanvas

Bundlings in MVC 4 do not render correctly once hosted on IIS

I successfully hosted an MVC 4 application on IIS, which was developed using the .Net 4.5 framework. However, I encountered an issue where the CSS and JS files were not rendering properly in IE11, although they worked perfectly in Chrome. Here is the code ...

asp.net-mvc-4iis-7.net-4.5bundling-and-minificationbootstrap-4

Sending Multiple Checkbox Values to PHP Using jQuery's Ajax Function

Using jQuery to retrieve values from multiple checkboxes is simple and effective. To see a demonstration, check out this link The jQuery function works well; when a checkbox is checked, we can see the selection based on the data-id after clicking btnUpda ...

javascriptphpjqueryhtmlajax

Configuring express for serving static CSS and JavaScript files

I'm currently facing issues with setting up the middleware of my application to serve static files like css and js. My goal is to include css and js files from the public directory in my index.html. You can view the current file structure here Below ...

htmlnode.jsexpress

Having trouble retrieving the YouTube channel name using XPath node in Selenium and TestNG

My current task involves navigating to the YouTube website, entering the search term "qtp," and clicking on the Search button. Once on the results page, I need to extract the Channel Name. To achieve this, I used Firebug to identify the path for the first ...

javahtmlxpathseleniumtestng

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

phpjqueryhtmlcss

Using JavaScript to switch the classes of buttons and elements

Hey there! I received this code from a friend who was trying to modify the switch buttons. I made some changes so that each button can now change the state of two separate elements when pressed. Here's the altered code: function toggleClass(ev){ v ...

javascriptcss

No matter what I attempt, Ng-options is still failing to work properly

This is my custom selection element: <select ng-options="country.country for country in countries" formControlName="country"></select></label> Below is the TypeScript component code associated with it: import { Component } from ' ...

htmlangulartypescript

When an absolute positioned element exceeds the right border of its relative parent, its width will be truncated

When position: absolute; divs are placed inside or around a position: relative; parent, their height and width are based on the size and length of the text they contain. However, if one of these divs extends beyond the right border of the relative parent, ...

htmlcsscss-position

list of key combinations in a ul element

I programmed a list of world states in PHP using an unordered list (<ul>): $WORLD_STATES = array( "France", "Germany", "Greece", "Greenland", "United Kingdom", "United States", "Uruguay" ...

javascripthtml

Expanding the ul height with animation when the page loads

Hi there, I am a beginner looking to create a ul list that increases its height with animation when the page loads. Can this be achieved with CSS? Any assistance would be greatly appreciated. <ul> <li><a href="/">title 1</a>& ...

javascriptjqueryhtmlcss

Columns nested within tabs in Bootstrap4

My current layout is shown here: https://i.sstatic.net/vQsqz.jpg I am looking to incorporate nested columns within these tabs. My attempted solution so far has been unsuccessful. The issue I am facing is that the columns within the specific tabs are ove ...

htmlcsstwitter-bootstrapbootstrap-4

What is the best way to incorporate multiple Bootstrap templates into an Angular project without causing conflicts between them?

When incorporating a bootstrap template into the admin interface, it is important to consider that its design may vary from the template used for visitors. Mixing multiple styles based on different templates can lead to conflicting styles and can potenti ...

javascriptcssangularbootstrap-4

How to style a parent div with a background class in Angular 6

In my Bootstrap 4 project, I am creating an accordion that consists of cards. Each card contains various icons such as edit, view, and details. When any of these icons are clicked, a function in the component is triggered to navigate the user to a child ro ...

angularbootstrap-4angular6bootstrap-accordion

Is there a way to occupy the extra space while working with an inline unordered list?

Using this unique CSS code, I've managed to give my unordered lists a touch of elegance: ul, li { padding: 0px; margin-left: 0px; margin-bottom: 0px; display: inline; } li { border: solid 1px #333333; margin-right: 5px; padding: 2p ...

htmlcss

Navigating Through Secondary Navigation with Ease

In my React project, I am developing a mega-menu styled dropdown navigation. As a functional component, I am utilizing the useState hook to manage the state and control the display of sub-navigation items. The functionality of the dropdown is operational, ...

javascriptcssreactjs

The vertical alignment of the button text with SVG is not properly aligned

I'm facing a challenge in vertically centering text in a button while also using SVG. The text is centered properly when the SVG is removed. How can I maintain the SVG size and still achieve vertical text centering? https://i.sstatic.net/PJRtR.png ...

css

Evaluating QUnit Test Cases

How do you write a test method in QUnit for validating functions developed for a form? For example, let's consider a form where the name field should not be left blank. If the validation function looks like this: function validNameCheck(form) { if ...

javascripthtmlqunit

The redirection of the URL after form submission is not functioning correctly

I'm attempting to develop a pair of dropdown lists in Elementor where the second dropdown's options depend on what is selected in the first, and the second contains URLs linked to a GO button that redirects to the chosen URL. However, I've f ...

javascripthtmljquery

Is there a way to deactivate the spin buttons for an input number field?

Is there a way to create an input element with type number in Vue using createElement() in TypeScript and then disable the spin buttons for increment and decrement? I attempted to use the following CSS: input[type=number]::-webkit-inner-spin-button, input ...

htmltypescriptvue.js