Collapse the borders of Angular's div layout container

I need help with collapsing the borders of div containers when generating a table using angular material's layout system. To see what I have done so far, please refer to my jsfiddle linked below:

Jsfiddle

Below is the HTML code snippet. Any guidance on how to achieve this would be greatly appreciated. Thank you.

<div ng-app="myApp" ng-controller="mainCtrl">
    <script type="text/ng-template" id="/template">
        <button ng-click="testFn()">Test</button>
        <div layout="row">
            <div flex ng-repeat="col in column"><span>HEADER{{$index}}</span>
                <div layout="column">
                    <div flex style="border: 1px solid black;" ng-repeat="row in [1,2,3]">{{$index}}</div>
                </div>
            </div>
        </div>
    </script> 

    <form-table table-layout=tableLayout|filter:{table_id:1}></form-table>
</div>

Here's a look at my code:

Answer №1

Check out this updated version of your jsFiddle:

http://jsfiddle.net/ccf0sphf/13/

The revised design avoids using the border-collapse method, which typically involves displaying <DIV>s as a table. Instead, it utilizes a combination of CSS combinators (child selector) and the ng-class directive:

div.col {
    border-top: solid 1px black;
}
div.col > div.box {
    border-bottom: solid 1px black;
    border-right: solid 1px black;
}

The div.col-first class is specifically applied within an ng-class to target only the first column:

div.col-first {
    border-left: solid 1px black;
}

This approach is necessary due to the presence of a <SPAN> element at the beginning of each column. If not for this constraint, a first-child pseudo-element could have achieved the same outcome.

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

Ways to prevent my website from being accessed through the Uc Browser

Is there a way to prevent my website from functioning on UC Browser using HTML or JavaScript? ...

Javascript Object and Conditional Statement

I am working on a Dygraph object creation script that includes a data variable. However, I want to avoid passing in this variable for older browsers. Here is the code snippet: function prime() { g = new Dygraph( document.getElementById("g"), d ...

summoning the iframe from a separate window

In my current setup, I have a link that passes a source to an iframe: <a href='new.mp4' target='showVideo'></a> <iframe src='sample.jpg' name='showVideo' ></iframe> However, what I would lik ...

Tips for successfully sending hidden values along with an ajax file upload form

Currently, I am working on sending some values of hidden input using an ajax form. Despite trying several methods, it seems like the values are not being successfully transmitted. HTML <form id="upload_form" enctype="multipart/form-data" method="post" ...

JavaScript function unable to access static file for image

I need assistance with dynamically displaying an image (a checkmark or "X") based on a variable. When I insert the image using a script directly in the HTML file, it functions correctly. However, when attempting to set the image from within the createEasyD ...

Protractor throwing error: 'Cannot access click property of undefined'

I need assistance with clicking on a specific CSS locator to perform a "math floor" operation. Can someone help me with this? The CSS code snippet in question: <input ng-attr-id="industry_{{$index}}" ng-attr-value="{{$index}}" ng-model="stateData.curr ...

"Create dynamic web pages with multilingual support using HTML, JQuery, and nested

For my multilingual website, I wrote this simple JQuery code: (function() { var language, translate; translate = function(jsdata) { $('[tkey]').each(function(index) { var strTr; strTr = jsdata[$(this).attr('tkey')] ...

Accessing JSON data in AngularJS from Node.js as the backend and SQL database

I am currently working on a project that involves setting up a node.js server in the backend and using AngularJS in the frontend. In order to fetch information from an SQL database, I have implemented a simple GET request as shown below: req.execute(&apos ...

When a PHP if statement is triggered by reading a text file, it activates a checked

I am working on a PHP project that involves an on-off button and a txt file. The goal is to have the button disabled (with 'unchecked' echoed) when the value in the txt file is true, and enabled (with 'checked' echoed) when the value is ...

What is the best way to locate a div element with a specific style?

What is the method to locate a div element by its style? Upon inspecting the source code in IE6, here is what I find: ...an><div id="lga" style="height:231px;margin-top:-22px"><img alt="Google"... How can this be achieved using JavaScript? ...

Can the input field offer guidance on its own?

While browsing, I came across an HTML5 checkout form that grabbed my attention. You can view the source here I decided to make some changes to the form and discovered that entering an incorrect email address triggers helpful tips. Strangely, upon closer ...

What is the best way to target all the 'tr' elements within a 'table' using angularJS?

I have developed a customized directive that is targeted at a 'tr' element within a table. <tr row-select > I am looking to eliminate a specific style from all 'tr' elements under that particular table. directiveApp.directiv ...

Does "th:each" assign all attributes to the same column?

Having an issue where the "openhours" from the database are loaded into a view, but all 7 opening hours are listed in the Monday column. Below is the code snippet: (HTML) <div class="table-hover"> <table class="table table-striped table ...

When the form is submitted, any blank inputs and their corresponding hidden fields will be disabled

I created a form that has multiple input fields, and users have the option to enter values or leave them blank. Each input field is accompanied by a hidden input field which contains a specific id unique to the corresponding visible input field. To disable ...

AngularJS triggers the function on all controllers

I encountered a problem with a specific function in my code. The issue is that the scrollFunction continues to get triggered even when I navigate to another page. I would like to limit this functionality to only apply to a particular page within the cont ...

Arranging text within a td cell

This is what I currently have: <tr> <td colspan="4" style="font-size:7pt; font-color:red; font-weight: bold;"> PLEASE NOTE: SPECIFY THE ARTICLE IN AS MUCH DETAIL AS POSSIBLE </td> </tr> However, the text does not a ...

Firebug mistakenly detects phantom errors

<div id="video-player" data-src="http://www.youtube.com/embed..."></div> Inspect Element - Browser Developer Tools: Error: Access to property 'toString' denied I scanned the entire page (Ctrl+F) and could not find any reference t ...

Learn how to dynamically add comments to HTML elements in AngularJS

Here is the meta tag that I have: <meta title='raja' identifier> I would like to know how to manipulate the DOM so it looks like this: <!-- reference <meta title='raja'> --> Could you recommend a way to manipulat ...

What is the procedure to reduce my final search result by 1?

When the search is triggered, I want to filter the images by name. However, the issue arises when trying to make everything disappear on filter addition. <ul id="list2"> <li class="in2"> An extra number is added ...

The issue of the fixed navbar overlapping the scrollbar of the page occurs when utilizing the overflow-y scroll feature

I am trying to create a web page with snap scroll and a fixed navbar that remains at the top. However, I'm facing an issue where the navbar is overlapping the right scroll bar, which should not be happening. If I remove the overflow-y property from th ...