How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Question

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Is there a more stylish approach to styling this HTML table using CSS display: table with Sass? Instead of using traditional table elements, I have created a table layout using display: table CSS styles applied to div elements:

    <div style="display:table">
        {{#definitions}}
        <div style="display:table-row">
            <div style="display:table-cell">{{key}}</div>
            <div style="display:table-cell">{{value}}</div>
        </div>
        {{/definitions}}
    </div>

This code snippet features a Mustache template for data binding, but I am looking to enhance it by migrating the style references to Sass. What would be the most elegant solution for this task?

javascript html css sass mustache

Answer 1

Answer №1

It's possible that I may not fully grasp your question, but you can achieve this by utilizing a single class on the outer element and then selecting the child elements with the > symbol at each level to create rows and cells:

.display-table {
  display: table;

  >div {
    display: table-row;

    >div {
      display: table-cell;
    }
  }
}

This approach would result in the generation of the following CSS...

.display-table {
  display: table;
}
.display-table > div {
  display: table-row;
}
.display-table > div > div {
  display: table-cell;
}

<div class="display-table">
  <div>
    <div>{{key}}</div>
    <div>{{value}}</div>
  </div>
</div>

Answer 2

It's possible that I may not fully grasp your question, but you can achieve this by utilizing a single class on the outer element and then selecting the child elements with the > symbol at each level to create rows and cells:

.display-table {
  display: table;

  >div {
    display: table-row;

    >div {
      display: table-cell;
    }
  }
}

This approach would result in the generation of the following CSS...

.display-table {
  display: table;
}
.display-table > div {
  display: table-row;
}
.display-table > div > div {
  display: table-cell;
}

<div class="display-table">
  <div>
    <div>{{key}}</div>
    <div>{{value}}</div>
  </div>
</div>

How can we create a stylish HTML table using CSS display:table and SASS in a sophisticated manner?

Answer №1

Similar questions

Viewing MSQL data using PHP. Interested in transferring specific rows to a different SQL table and removing them from the current table

Guide on adding a line break between two inline-block elements

Creating an interactive graph in Asp.Net MVC using Razor syntax and jQuery AJAX

simulating the use of `usePrompt` in react-router-dom version 6

Convert HTML element to a JSON object

Modify the class's height by utilizing props

Looking for a custom textured circle in three.js?

The error message states that the provided callback is not a valid function -

The React-Virtualized Autosizer component is returning a height value of 0 when used with VirtualScroll

What is the best way to differentiate between words enclosed in quotation marks using colors?

What are the steps to perform typecasting in nodejs?

Detecting when an object exits the proximity of another object in ThreeJS

Broadcast and listen to events in AngularJS using `$rootScope.$emit`

What's the best way to restrict characters in a paragraph?

Can the @font-face src URL be modified?

Having trouble decoding audio data in JavaScript Web Audio?

Deciphering the JavaScript code excerpt

How to detect a click event in any area of an Angular2

Controlling opacity with jQuery animate() function using a click event

Troubleshooting: Issue with selecting items in jQuery Datatables