Angular JS - Resolving issues with table headers

I've been working on fixing the headers of a table and have tried multiple solutions I found online, but nothing seems to be effective for me. Here's my current code:

<div class="report-container">
    <div class="row">
        <div class="col-md-12 col-sm-12"
            ng-class="updatingReportFieldValue ? 'table-container-disabled cursor-progress' : ''"
            ng-show="!loadingReports">
            <div class="suggestion">
              <table class="table table-striped table-bordered table-header-fixed fixed_headers">
                <thead class="text-center text-info">
                  <tr>
                    <th class="text-center">Annotation</th>
                    <th class="text-center">Field</th>
                    <th class="text-center">Message</th>
                    <th class="text-center">Score</th>
                  </tr>
                </thead>
                <tr ng-repeat="report in reports.data">
                  <td class="text-center">{{ report.attributes.annotation }}</td>
                  <td class="td-report-field">{{ report.attributes.field }}</td>
                  <td>{{ report.attributes.message }}</td>
                  <td class="text-center">{{ report.attributes.score }}</td>
                </tr>
              </table>
            </div>

As for the css, I haven't made any changes aside from

.report-container{



}

I've tried various solutions, but I'm struggling with aligning the header to the table columns. Any advice or guidance on how to solve this issue would be greatly appreciated.

Answer №1

Utilizing flex can simplify the layout process.

Consider this example where the ng-repeat is used instead of hard-coded td values:

table {
  display: flex;
  flex-direction: column;
}
tr {
  display: flex;
}
tbody {
  overflow-y: scroll;
  height: 200px;
}
th,
td {
  flex: 1;
  border: 1px dotted black;
  text-align: center;
}
tr:nth-child(2n+1)>td {
  background-color: #dcdcdc;
}
thead th {
  color: white;
  background-color: #454545;
}
<div class="suggestion">
  <table class="table table-striped table-bordered table-header-fixed fixed_headers">
    <thead class="text-center text-info">
      <tr>
        <th class="text-center">Annotation</th>
        <th class="text-center">Field</th>
        <th class="text-center">Message</th>
        <th class="text-center">Score</th>
        <tr>
    </thead>
    <tbody>
     <!-- rows and cells here -->
    </tbody>
  </table>

To customize column widths, adjust the flex values in the snippet provided:

table {
  display: flex;
  flex-direction: column;
}
tr {
  display: flex;
  flex-wrap: nowrap;
}
tbody {
  overflow-y: scroll;
  height: 200px;
}
th,
td {
  border: 1px solid black;
  text-align: center;
}
.report-annotation {
  flex: 1;
}
.report-field {
  flex: 0.5;
}
.report-message {
  flex: 2;
}
.report-score {
  flex: 0.4;
}
tr:nth-child(2n+1)>td {
  background-color: #dcdcdc;
}
thead th {
  color: white;
  background-color: #454545;
}
<div class="suggestion">
  <table class="table table-striped table-bordered table-header-fixed fixed_headers">
    <thead class="text-center text-info">
      <tr>
        <th class="text-center report-annotation">Annotation</th>
        <th class="report-field">Field</th>
        <th class="text-center report-message">Message</th>
        <th class="text-center report-score">Score</th>
        <tr>
    </thead>
    <tbody>
      <!-- use ng-repeat here -->
    </tbody>
  </table>

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

The intl-tel-input dropdown feature is malfunctioning on mobile browsers

Currently, I have integrated the intl-tel-input library into my project for selecting international telephone numbers from a dropdown menu. https://i.sstatic.net/vPfpd.png While accessing the application on a web browser, the country flags display correc ...

Developing a universally accessible variable for utilization in various functions

I'm having trouble understanding why 'currentPos.LatLng' is undefined when trying to access it outside the function even though it's part of an object. I want to be able to retrieve the current position values to use them in another fun ...

Tally Every Number Encountered Within the Blog Archive

I've been facing some challenges putting together this jquery functionality. My original idea was to create a toggle effect for the archive's years and months. For example, when I click on a YEAR, it should toggle down to display all MONTHS, and ...

Is it necessary to have tools when learning angular js?

I'm having some trouble with my AngularJS examples, specifically with Angular routing. I've been practicing them on Notepad and running them in the browser. Do I need to use a tool like Eclipse or Visual Studio to get them to work properly? Here ...

Update the src attribute in an HTML document

I am looking to dynamically change the size of an image on an HTML page using a dropdown list. Here is my code: <html> <head> </head> <body> <select id="selectbox" name=""> <opti ...

Uploading and previewing multiple files, including images and videos

I am facing an issue with a child component where the input field is obscured by a slotted element. The parent component provides the slotted click event element, along with a preview of the file(s) and the option to delete them. I am struggling to impleme ...

Top recommendation for showcasing a numerical figure with precision to two decimal points

Within my function, I am tasked with returning a string that includes a decimal number. If the number is whole, I simply return it as is along with additional strings. However, if it's not whole, I include the number along with the string up to 2 deci ...

What is the best way to incorporate and organize the templateHyper folder within an established web project directory?

Can anyone offer advice on how to properly integrate and organize the 'templateHyper' (Bootstrap template) folder within my web project? I've been developing a project using C#, JavaScript, HTML, and Bootstrap's templateHyper. I'm ...

Problem encountered during the transfer of JSON data from PHP to JavaScript

Currently, I am working on a PHP file that extracts data from a database to display it on a chart using the Chart.js library. The chart is functioning properly, but I am facing an issue where I need to use the json_encode() function to pass the array value ...

Display the query results on a separate blade

In my original attempt, I intended to display the results in a modal but later decided to show them in a different blade. My goal is to fetch all comments related to a post using its post_id. However, I encountered the following error: The GET method is no ...

Perform both creation and updating tasks within a single transaction using sequelize

Is it feasible to add a new row and update it within the same sequelize transaction? Here's what I've tried: let transaction; try { transaction = await dbcontext.sequelize.transaction(); const newEmployee = await dbcontext.Empl ...

The steps to triggering a button click after e.preventDefault()

When attempting to prevent a click() event of a button by using preventDefault() after unbinding the button with unbind(), I encountered an issue where it did not work as expected. <script> $("#update2FAButton").on("click",function(e){ e.pre ...

What steps are necessary for TypeScript to retrieve my definitions when utilizing node.js require statements?

I have been utilizing Visual Studio 2013 tools for Node.js along with VS2013 Update 2. In my util.ts file, I have the following code: var Util = function () { this.getSelectOption = function (elem, value) { var x = 99; } module.exports = ...

Struggling to assign the chosen value in AngularJS

My edit form contains multiple select boxes, and when the page loads, data is loaded into all input fields except for the select boxes. Despite my efforts to set the selected value for the select boxes, I have not been successful. Here's a snippet of ...

Using ID attributes to compare JavaScript Objects and generate a distinct list within Angular/JS

I am working with the github API to retrieve an array of objects containing commit data. My goal is to extract a unique list of commitors and format it as shown below to create a graph: {"id":temp,"label":temp,"type": "number","p": {} } Here is the code ...

Is it possible to utilize a JavaScript file for creating inline JavaScript in Next.js?

I am facing an issue with a third-party script that requires me to define a global window.varforthem before it loads. I checked the nextJS documentation but implementing it as suggested seems less readable and conflicts with eslint and other plugins. Addit ...

Angular's ng-submit directive does not use the most up-to-date scope available

I'm currently learning Angular and have been struggling with a particular issue. I have created a form to edit user details. Upon page load, I make an AJAX call to fetch the data of the selected user and populate the scope with the values. Initially, ...

After executing grunt serve, Bower issues a warning for jquery stating "not injected"

Recently, I had to clone a project and rebuild bower packages. It seems that jQuery has been updated, causing a warning to appear: Warning: Please check the "app/bower_components/jquery" folder for the necessary file and manually include it in your ...

Convert an array into individual objects and include key-value pairs from a separate object

I am working with two arrays that have the same length: One is a simple array numbers = [4,5,6] The other is an array of objects objects = [ {type: "x", value: 7}, {type: "y", value: 8}, {type: "z", value: 9} ] My goal is to combine th ...

Transforming the JSON data format from Pandas to Highstock in an AngularJS controller

I've been struggling to figure out how to convert JSON data into the array format needed for a Highstock Series chart. In my code, I have tried the following: df2.reset_index().to_json(orient='records') which produces output like this (fo ...