Intersecting table columns with a different data table

Question

Intersecting table columns with a different data table

My task is to create a table with a column that contains another table, where I want the colors of each alternating row to be different. Please refer to the image below (ignore the "CharacterAgain" column).

Below is an example of AngularJS code for the table: (The list can have any number of elements, even or odd)

<table style="border: 1px solid;">
<thead>
  <th>Character</th>
  <th>Name</th>
  <th>CharacterAgain</th>
</thead>
<tbody>
           <tr ng-repeat="actor in AAA.cast">
            <td>{{actor.character}}</td>
<td>
  <table>
   <tr ng-repeat="actor1 in AAA.cast"> // could be some another list
      <td>
     {{actor.name}}
     </td>

   </tr>
  </table>
</td>
</tr>
</tbody>
</table>

I've attempted various methods to apply a CSS class through scripting, but they all seem to fail in one way or another. I would greatly appreciate it if someone could provide me with a working jsFiddle for this. Please let me know if achieving this is possible using CSS.

html css angularjs html-table

Answer 1

Answer №1

To achieve alternating row colors, you can utilize the nth-of-type selector in your CSS:

.row{
   background-color: blue;
}

.row:nth-of-type(odd){
   background-color: black; 
}

Answer 2

To achieve alternating row colors, you can utilize the nth-of-type selector in your CSS:

.row{
   background-color: blue;
}

.row:nth-of-type(odd){
   background-color: black; 
}

Answer 3

Answer №2

It's quite simple to achieve this effect in your CSS file by adding the following:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

For example, you can see it working here: http://jsfiddle.net/x8vxhuhk/

If you want this styling to apply only to the inner table, you can add a class to the entire table like so:

HTML:

<table class='striped'>

CSS:

.striped tr:nth-child(even) {background: #CCC}
.striped tr:nth-child(odd) {background: #FFF}

If you're unable to modify the classes, you can achieve the same result with slightly messier code:

CSS:

table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

Overall, browser support is good for this feature, although there may be some issues with IE8: http://caniuse.com/#feat=css-sel3

Edit

You could also do the following:

/* Styles for outer table */
table tr:nth-child(even) {background: #FFF}
table tr:nth-child(odd) {background: #CCC}
/* Styles for inner table */
table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

Answer 4

It's quite simple to achieve this effect in your CSS file by adding the following:

tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}

For example, you can see it working here: http://jsfiddle.net/x8vxhuhk/

If you want this styling to apply only to the inner table, you can add a class to the entire table like so:

HTML:

<table class='striped'>

CSS:

.striped tr:nth-child(even) {background: #CCC}
.striped tr:nth-child(odd) {background: #FFF}

If you're unable to modify the classes, you can achieve the same result with slightly messier code:

CSS:

table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

Overall, browser support is good for this feature, although there may be some issues with IE8: http://caniuse.com/#feat=css-sel3

Edit

You could also do the following:

/* Styles for outer table */
table tr:nth-child(even) {background: #FFF}
table tr:nth-child(odd) {background: #CCC}
/* Styles for inner table */
table table tr:nth-child(even) {background: #CCC}
table table tr:nth-child(odd) {background: #FFF}

Intersecting table columns with a different data table

Answer №1

Answer №2

Edit

Similar questions

The width:auto attribute for images in ie6 is not functioning as expected

Switching hover behavior on dropdown menu for mobile and desktop devices

I am attempting to rearrange the order of a specific div using the nth-child() selector in CSS within a media

Encountering a 400 error while trying to implement file upload feature in Spring AngularJS -

A guide on applying bold formatting to a specific section of text in React

When using PHP, JavaScript, and HTML, you can trigger an image upload immediately after choosing a file using the

Colorbox: Display a specific section from a separate HTML page

Receive real-time updates on the progress of a lengthy post by utilizing Angular's $http feature

creating custom HTML elements in Rails forms

Loop through each current value in an ng-repeat directive and use it in an

Using Jquery and CSS to create a sleek animation for opening a div box container

unable to adjust the maximum height limit

Merging columns in Bootstrap 4 grid system

Filtering data with AngularJS upon user clicks

Ensure that the form is validated using ngDialog openConfirm before it can be closed

Is there a way to prevent elements from resizing when zooming in or out?

Having trouble with Python Selenium CSS Selector? If your element is not visible, it

Ensure that an HTML table row remains fixed on the screen at all times

Placement of BOX alongside each other

Buttons aligned vertically alongside an input text field