Apply a border to a specific row within a grid using the `border-collapse: separate`

I created a unique data grid where I wanted each row to be separated, so I utilized the border-collapse: separate property.

However, I encountered an issue when trying to add borders to the rows within the grid.

Is there a method for adding borders to the rows while maintaining their separation within the table?

View Example on Stackblitz

<dx-data-grid style="margin-top:50px" class="tableTask" [dataSource]="datas"
    [showColumnLines]="false" [showRowLines]="false" [columnAutoWidth]="true" [allowColumnResizing]="true">
    <dxo-header-filter [visible]="true"></dxo-header-filter>
    <dxi-column dataField="ID" dataType="text" caption="ID"></dxi-column>
    <dxi-column dataField="Name" dataType="text" caption="Name"></dxi-column>
</dx-data-grid>

CSS Styling:

::ng-deep .tableTask .dx-datagrid-headers  {
letter-spacing: 0;
color: #4D4F5C !important;
font-weight: bold !important;
font-size: 13px !important;
background-color:#EDF3F9;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
    border-radius: 8px 8px 0px 0px;
    height: 60px;
    line-height: 18px;
    border-bottom: none !important;
}

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  box-shadow: 0px 3px 20px #BCBCCB47;
  border-radius: 8px;
  opacity: 1;
}

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row {
  line-height: 50px;
  height: 60px;
}

::ng-deep .tableTask .dx-datagrid-headers + .dx-datagrid-rowsview {
   border-top: 0 !important;
}

::ng-deep .tableTask .dx-datagrid-content .dx-datagrid-table {
  border-collapse: separate !important;
  border-spacing: 0px 16px !important;
}

::ng-deep .tableTask .dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: none;
}
htmlcssangulartypescriptdevextreme-angular

Answer №1

If you prefer to continue using border-collapse: separate.

You can easily apply a border to each td in every row: 

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td {
  border-bottom: 1px solid red;
}

Add the provided code at the end of your CSS.

If you want to have a complete border for your row, you can utilize this CSS: 

::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td{
  border-bottom: 1px solid red;
  border-top: 1px solid red;
} 
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:first-child {
  border-left: 1px solid red !important;
}
::ng-deep .tableTask .dx-datagrid-rowsview .dx-row td:last-child {
  border-right: 1px solid red;
}

I have included !important to the border-left property due to existing CSS.

Answer №2

It can be tricky to add a border to the tr element within a table.

One potential solution is to utilize the pseudo-element :after to create a line for the table row, but there is a complication:

The impact of 'position:relative' on elements like table-row-group, table-header-group, and others is not clearly defined.

To work around this issue, you could use a "hack" by applying transform: scale(1); to your rows. Here's an example:

table {border-collapse:separate;border-spacing: 10px;}
td {}
tr {position:relative;transform: scale(1);}
tr:after  {
  content:'';
  display:block;
  width:100%;
  height:1px;
  background-color:#000;
  position:absolute;
  bottom:0;
  left:0;
  
  }
<table>
  <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr>
   <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr> <tr>
    <td>dasdasd</td>
    <td>dasda</td>
    <td>asdasda</td>
  </tr>
</table>

However, it is advised to avoid using CSS hacks on websites whenever possible.

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

Add a border to the navigation bar item to indicate the current page being displayed

This section shows the current navigation bar item https://i.sstatic.net/6RAGJ.png This is the desired outcome when clicking on the tab https://i.sstatic.net/8nFeB.png Uncertain about the best approach for achieving this. I have attempted to submit a val ...

javascripthtmlcssangularbootstrap-4

Unable to include below the heading for the images

As I venture into the world of HTML, I am facing a challenge with placing titles below two images. Every time I attempt to add either h or p, the text ends up on the right side instead of below the images. What could I be doing wrong? This is all part of ...

csshtml

What is the best way to delete a particular span element within an HTML table using JavaScript or JQuery?

Looking for assistance in removing a specific span element from the code snippet below, which was extracted from the elements tab of a browser. I am trying to delete the span located under the fourth 'td' within the 'tr' that has the cl ...

javascriptjqueryhtml

I am experiencing an issue where tapping on the Status Bar in MobileSafari is not functioning correctly on a specific

I am struggling to troubleshoot this problem with no success so far. The HTML5 JavaScript library I'm developing has a test page that can display a large amount of output by piping console.log and exceptions into the DOM for easy inspection on mobile ...

javascriptioshtmlsafarimobile-safari

Tips for dynamically adjusting the size of a div container according to the user's

I have been working on a unique landing page design featuring a menu made up of custom hexagons. I aim to make these hexagons dynamically adjust to fill the entire screen based on the user's resolution, eliminating the need for scrolling. For a previ ...

javascriptjqueryhtmlcss

Stacking pictures with CSS and absolute placement

I have designed a webpage where I need to layer three images in a specific order to create a background for content placement without any movement during scrolling. Fixed positioning is not suitable for this purpose. Below is the sequence in which the imag ...

htmlcsscss-position

What are the steps to transform an HTML select element into a sub-menu user interface?

Can the native HTML element select be used to add submenus? Processes lack of process failure to follow process HTML <!DOCTYPE html> <html> <body> <select> <optgroup label="Swedish Cars"> <option value="volvo"&g ...

javascripthtmlcss

React slick slider not functioning properly with custom arrows

"I have encountered an issue while trying to implement multiple sliders in my component with custom arrows positioned below each carousel. Despite following the documentation meticulously, the arrows do not respond when clicked. What could possibly be ...

reactjstypescriptnext.jscomponentsslider

In my Stripe application, I am looking to connect a single email address to a unique customer in order to prevent recurring payments from creating duplicate customer profiles. However, I am facing an issue where Stripe continues

My product is a subscription service that provides users with access to a specific service on my website. I have set up the product on Stripe and added the payment link to my website: <a className="bg-red-600 text-white py-2 px-4 rounded inline- ...

typescriptmongodbnext.jsstripe-paymentsstripe-customers

Building a dynamic hierarchical list in Angular 8 with recursive expansion and collapse functionality

I am attempting to construct a hierarchical expand/collapse list that illustrates a parent-child relationship. Initially, the parent nodes will be displayed. If they have children, a carat icon is shown; otherwise, a bullet icon appears. When the carat ico ...

htmlangulartypescript

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Dynamic stylesheet in Vue component

Currently, I am utilizing a Vue component (cli .vue) and facing the challenge of selectively displaying my stylesheet based on a boolean value. To put it simply: When myVar==false, the component should not load its styles. <style v-if="myVar" lang="sc ...

javascriptcssvue.jsvuejs2vue-component

The JSfiddle code seems to be malfunctioning

I'm attempting to transfer elements from one listbox to another in HTML. I found the code below on a Stack Overflow link that redirected me to jsfiddle, where it works fine. However, it's not working here. Can someone help me figure out what&apos ...

javascriptjqueryhtmljsfiddle

Overlay Image on Thead Background

I am working on an HTML document with CSS and have a specific requirement. I need to set a background image in the <thead> element, which should act as an overlay for the other tds. Can this be achieved? The desired outcome is to have the image only ...

htmlcss

Activating development mode for LessCSS in Node.js

I'm encountering some major difficulties identifying LESS parse errors within a large CSS compilation. The error messages aren't providing much help (at least not for me). Here are my questions: 1. Is there a method to activate more debugging ...

cssdebuggingnode.jsless

Searching for a specific string in emails using Python's imap library

Looking for assistance with Python, specifically related to parsing Gmail emails using IMAP. I am trying to search for a specific string in the body of an email that I have successfully fetched. Here is a snippet of the code: ids = data[0] id_list = ids.s ...

pythonhtmlemailimaplib

Make the minimum height of one div equal to the height of another div

My query is somewhat similar to this discussion: Implementing a dynamic min-height on a div using JavaScript but with a slight twist. I am working on a dropdown menu within a WordPress site, integrated with RoyalSlider. The height of the slider div adjust ...

javascriptjquerycsswordpress

What is the best way to conceal a Material UI button with CSS?

For my TODO react app, I am using a Material UI button. My goal is to create a form with an input field and a submit button, but I want the submit button to be invisible so that users think the form submits when they press the "Return" key. import { Tex ...

cssreactjsformsbuttonmaterial-ui

Guarding Components Against Vague CSS

Currently, we are in the process of developing widgets that will be embedded on multiple pages. To safeguard these widgets from potential CSS conflicts (such as a generic p { background-color: red }), I have two options in mind: The first option involv ...

cssiframe

Enhance Angular Material Select with Tooltip on Ellipsis Directive

In the midst of my Angular 9 project journey, I encountered a directive designed to add a matTooltip if an element's text is truncated (ending in ellipsis due to overflow). Everything was running smoothly with this directive until I introduced a mate ...

angularangular-materialangular9