Prevent the use of repetitive borders by utilizing display: inline-block

I've been experimenting with the behavior of div elements when used as a table, rather than using the traditional table element or display properties. The main reason for this is that I have found tables and display properties to be problematic for my project. Interestingly, some major SaaS companies like Google Sheets, Excel Online, and Airtable are also opting for divs over tables, which has inspired me to try and achieve similar results. For reasons.

After working on some code snippets, I encountered an irritating issue: duplicate borders when using display: inline-block. Here's a visual example:

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

You can also view a fiddle here: https://jsfiddle.net/Lc0rE/j2obdh0h/

Here is the code snippet:

HTML

<div class="table-container">
  <div class="row-container">
    <div class="cell">Cell1</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
</div>

CSS

.table-container {
  width: 700px;
  height: 100vh;
  background: #fefefe;
}

.row-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background: #fff;
  height: 30px;
}

.cell-header {
  font-weight: bold;
}

.cell {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5px;
  min-width: 100px;
  /* ;
  border-left: 1px solid #dde1e3;
  border-right: 1px solid transparent;
  border-top: 1px solid transparent; */
  border: 1px solid #dde1e3;
  top: 0;
  overflow: visible;
}

.cell:last-child {
  border-right: 1px solid #dde1e3;
}

.row-container:last-child {
  border-bottom: 1px solid #dde1e3;
}

.selected {
  border: 1px solid #00b9e6 !important;
  background: #EBF7FF !important;
}

.cell-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

If anyone has any insights on how to solve this border duplication issue, or suggestions on alternative approaches, I am open to all ideas!

Answer №1

To prevent double borders, the technique involves drawing borders separately. In order to create a highlight effect, absolute positioned pseudo elements are used for two sides of the borders.

$(".cell").click(function() {
  $(".selected").removeClass("selected");
  $(this).addClass("selected");
});
body {
  font-family: "Open Sans", "sans-serif";
  font-weight: 300;
  font-size: 13px;
}

.table-container {
  width: 650px;
  height: 100vh;
  background: #fefefe;
}

.row-container {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  background: #fff;
  height: 30px;
}

.cell-header {
  font-weight: bold;
}

.cell {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  padding-left: 5px;
  min-width: 100px;
  border-left: 1px solid #dde1e3;
  border-top: 1px solid #dde1e3;
  top: 0;
  overflow: visible;
}

.row-container .cell:last-child {
  border-right: 1px solid #dde1e3;
}

.row-container:last-child .cell {
  border-bottom: 1px solid #dde1e3;
}

.selected {
  position: relative;
  background: #EBF7FF;
  border-left: 1px solid blue;
  border-top: 1px solid blue;
}

.selected:before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  right: -1px;
  border-right: 1px solid blue;
}

.selected:after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  border-bottom: 1px solid blue;
}

.cell-content {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.draggable {
  position: relative;
  right: -7px;
  width: 12px;
  opacity: .3;
  height: 28px
}

.dragbar {
  position: relative;
  right: -4px;
  width: 4px;
  opacity: 1;
  height: 28px;
}

.dragbar:hover {
  background: blue;
  opacity: .6;
  cursor: ew-resize;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-container">
  <div class="row-container">
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>
    <div class="cell cell-header">
      <div class="cell-content">
        <span>Cell</span>
        <div class="draggable">
          <div class="dragbar"></div>
        </div>
      </div>
    </div>

  </div>
  <div class="row-container">
    <div class="cell selected">Cell1</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
  <div class="row-container">
    <div class="cell">Cell1</div>
    <div class="cell">Cel2312312l2</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
  <div class="row-container">
    <div class="cell">Cell1</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
  <div class="row-container">
    <div class="cell">Cell1</div>
    <div class="cell">Cell2</div>
    <div class="cell&qt;Cell2</div>
    <div class="cell">Cell3</div>
    <div class="cell">Cell4</div>
    <div class="cell">Cell5</div>
  </div>
</div>

Answer №2

Consider using this alternative approach:

.element { 
    border-left: 1px solid green;
}
.element:last-child {
    border-right: 1px solid green;
}
.container {
   border-top: 1px solid purple;
}
.container:last-child {
   border-bottom: 1px solid purple;
 }

updated fiddle link

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

sliding effect of the background image

Currently, I am in the process of creating a navigation system that includes a background image slide effect. My goal is to mimic the design of a specific website: http://tympanus.net/Tutorials/BeautifulBackgroundImageNavigation/ However, my challenge lie ...

Delete a designated section from a URL with the power of jQuery

I have a URL like http://myurleg.com/ar/Message.html and I need to change ar to en in it when clicked on. For example, if my current URL is: http://myurleg.com/ar/Message.html After clicking, it should become: http://myurleg.com/en/Message.html I attemp ...

Executing Selenium test cases based on HTML tag is a key aspect of automated testing

I need to run my selenium test scenarios based on the value of an HTML tag, for example: <meta name="survey name" content="ABC Car"> The content represents different event types, with a total of 4 possible event types. ...

Swapping out a style sheet within a intricate header

I'm in search of help with creating a stylesheet switcher for my website. My knowledge of html/css/js is self-taught, so I ask for forgiveness for any beginner mistakes. I have customized some code to fit my requirements, but I am unsure how to target ...

Unneeded return is necessary when utilizing recursion and restarting the application

Recently, I successfully recreated the 2048 game in Java, which was a pleasant surprise to me as I didn't expect to create something this "advanced." During the game, when tiles are moved, a new square/tile/number needs to be generated. To find an av ...

Maintaining hover functionality of menu button while navigating through sub-menu options

Creating a CSS dropdown menu is straightforward, but maintaining the hover state on the main menu button while navigating through the dropdown selections can be tricky. In the past, I used JavaScript to change the class and retain the background image, but ...

Can someone help me with combining these two HTML and JavaScript files?

I successfully created an HTML/JavaScript file that functions properly: <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor ...

How can one go about incorporating the feature "updating list upon clicking a label" on a webpage?

On my website, I currently display a comprehensive list of publications. However, I am looking to organize these publications by various research topics using labels. Ideally, when clicking on a specific label, only the papers related to that topic will be ...

What is the best way to store checkbox statuses in local storage and display them again in a JavaScript to-do list?

I'm currently working on a to-do list application using basic JavaScript. One issue I'm facing is saving the checked status of the checkbox input element and displaying it again after the page is refreshed. Since I'm still learning JavaScrip ...

Is it possible to create a CSS-only negative border radius?

I'm reaching out for help with a specific issue. I want to create a unique negative border radius for my navigation links, similar to the design shown in this image: http://prntscr.com/9vi0b5 Instead of using images like in the example, I'm look ...

An issue has been identified where the checked selection feature is not functioning correctly for CSS selections

Is there a way to change the border color of a label when a checkbox is checked using CSS selectors? Here's an example of what I have tried: label{ width:36px; height:36px; padding:9px; border:1px solid gray; border-radius:36px; } #check ...

What sorcery does Facebook use to alter the URL without triggering a page reload?

Similar Question: How can I update window location without a reload and # hack? Facebook and Ajax What method does Facebook use to change the URL without reloading the page? In the past, Facebook utilized the hash (#) symbol to prevent the page f ...

Buttons within the Bootstrap carousel caption cannot be clicked

I am currently designing a webpage with a Bootstrap carousel that includes a paragraph caption and two buttons. However, the buttons are not functioning as clickable links - when clicked, nothing happens. {% block body %} <div id ="car-container"> ...

The reverse is concealed following a CSS flip transition

After applying a CSS flip animation to a card, the backside isn't visible once flipped. Here is the HTML code for the card component named "ptree-card": <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- Rest of th ...

unable to retrieve the latest scope value following the completion of the ajax request

I attempted to use the code below, but despite searching for answers and solutions involving $apply and $timeout, nothing seemed to work in my case. I encountered several errors along the way. JS: var app = angular.module("test",[]) app.config(function($ ...

Background Image Division (Twitter Bootstrap)

I am facing a challenge while creating a module with a span8 width and varying height. The div contains an image that dictates its height, with text overlaid on the image. My issue lies in preventing part of the image from getting cropped when Bootstrap re ...

Deciphering the principles of Bootstrap

I'm looking to understand more about what Bootstrap is. I know it's commonly used for styling web pages, but could you provide me with a clear explanation? Can big companies like Twitter, Facebook, or YouTube utilize Bootstrap for their platforms ...

Collapsing one tab when another is selected in the accordion interface

I have successfully implemented an accordion feature, but I am facing an issue where the tabs do not close when another one is clicked. Currently, they only open but fail to close the previously opened tab... Below is the code snippet for reference: < ...

Redirecting script upon successful connection detection

I have created a script that checks for internet connectivity using an image, and redirects if internet is available. However, the issue is that it caches the images, leading to attempts to load them even when offline. Is there a different approach I can ...

Arranging elements in columns using Bootstrap

I am facing an issue with my columns in bootstrap, as they are currently appearing vertically, one above the other. I need them to be displayed side by side https://i.sstatic.net/ZKdj7.png Here is the code I am using: <div class="col-xl-4 col-lg ...