extra header in table

Hey guys, I'm not really into design and I could use some help. My CSS seems to be creating an extra head on my <tr> element. I used a CSS table generator to create the CSS code and employed a PHP HTML to build my table.

<html>
<title> No Deadline </title>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="./js/jquery.dynatable.js"></script>
<script src="./js/lytebox.js"></script>
<link rel="stylesheet" type="text/css" href="./css/sample.css">
<link rel="stylesheet" type="text/css" href="./css/table_blue.css">
<link rel="stylesheet" type="text/css" href="./css/jquery.dynatable.css">
<link rel="stylesheet" type="text/css" href="./css/lytebox.css">
<script>

$( document ).ready(function() {
    $('#my-table').dynatable();
});
function myFunction() {
window.open('table_admin_nodeadline.php','_self')
return true;
}
</script>
</head>
...

Here is the CSS that has been generated:

.data
...
those styles here
...

Answer №1

If I had to make a guess, it seems like you want to style the thead row differently compared to the other rows.

To achieve this, you can wrap the actual data in a tbody element and then target that separately from the thead row.

Here is an example:

<table class="data" id="my-table">
    <thead>
        <tr>
            <td>App Number</td>
            <td>Spoc Assigned</td>
            etc
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>APP_NUMBER</td>
            <td>SPOC_ASSIGNED</td>
    etc
        </tr>

    </tbody>
</table>

Then, you can select the tr/td elements based on their parents using CSS:

.data thead tr td {
    background: pink;
}
.data tbody tr:nth-child(odd) td {
    background-color: lightgreen;
}
.data tbody tr:nth-child(even) td {
    background-color: lightblue;
}

Note: Your original selector had a few mistakes that could have caused issues.

Firstly, the table is not a descendant of .data, so .data table is incorrect. You should use either .data or table.data.

Also, .data tr:first-child will always target every first tr, whether it's inside the thead or tbody.

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

Display/Conceal/Inactivate form input and division

I am utilizing the code snippet below to display a div and disable certain input values based on selection changes. The choices are Approval, Request, and Change. I suspect there is an issue with the third set of form options in my code. How can I modify i ...

Adding a countdown timer plugin from jQuery into a Blogger template

Currently, I am utilizing the 'simple' template on Blogger to build my blog. My goal is to incorporate a countdown timer into the design. After conducting some research, it appears that the most efficient method (that also allows for customizatio ...

How can I modify the style of table rows with CSS?

Is there a way to change the color/background of a selected row just like it does on hover, and also have the option to deselect the row? To see how it looks on hovering, check out: http://jsfiddle.net/q7ApN/ If you want to make a Change: #gradient-styl ...

I noticed that the Div element automatically resizes whenever I click anywhere on the page using Chrome

Encountering a problem in Chrome V18 where my gray login box resizes automatically whenever I click anywhere on the page. Any insights on what might be causing this behavior? EDIT: I've observed the error message below: event.layerX and event.laye ...

Automatically scrolling down a div as new content is added using XMLHTTPRequest.openConnection

https://jsfiddle.net/kv5gbamg/ - I created a jsfiddle to demonstrate the functionality of the system Essentially, I am seeking a way to automatically scroll the scrollbar to the bottom every time a new message is received. My system updates the div with ...

Only IE has a different margin-top effect on hover in the slideshow - Check out the CSS & project link for more details

When hovering over the IE slideshow, it moves downward. Any suggestions on why this happens? Visit development.legendarylion.com for more information. Could someone provide insight on why the slideshow increases top margin when hovered over? Explore the ...

Show the tinymce textbox dynamically

Whenever I select an option from a drop-down list, a set of elements are dynamically inserted into a form on the DOM using ajax. Among these elements are textareas that I want to convert into TinyMCE textareas. In my HTML head section, I have the followin ...

Trouble Arising in Showing the "X" Symbol upon Initial Click in Tic-Tac-Toe Match

Description: I'm currently developing a tic-tac-toe game, and I've run into an interesting issue. When I click on any box for the first time, the "X" symbol doesn't show up. However, it works fine after the initial click. Problem Details: ...

Hover effect not activating on image within modal

only img:hover is working, but after adding this to the CSS: #user-profile #user-myModal .modal-body img:hover #user-profile #user-myModal .modal-body .change-pic i{ display: block; } it's not working. I changed the class and id names, tried eve ...

A preselected default option determined by your geographical location in an HTML document

After searching extensively for a solution, I've found this to be quite challenging... In my website's HTML page, there is a dropdown menu containing all the countries. <option value="AF">Afghanistan</option> <option value="AX"&g ...

Utilize Python and BeautifulSoup for parsing HTML with multiple tags and classes

I am currently attempting to navigate through a complex HTML structure. Here is the snippet of the HTML code: <div class="example one"> <ol class="example two"> <li class="example three"> My object ...

How can I showcase the index of `<tr>` and `<td>` elements in a dynamically generated table

How can I print the index of table rows and data on click in javascript? <html> <head> <title>Table Creation</title> <script language="javascript" type="text/javascript"> function createTable() { ...

Enhance the appearance of your printed pages by incorporating borders with the help of wkhtml

Is there a way to print a square border on each page of a multi-page PDF rendered using wkhtmltopdf, similar to the question asked here: Add borders to each printed page with CSS? I generate an HTML page as a variable and utilize snappy from https://githu ...

After swapping out "div" with "input" and then replacing "input" with

My goal is to create a function where a user can edit text within a div. The idea is to replace the current text with an editable input field, and then convert it back into a div after the user hits enter. I've encountered an issue while trying to im ...

What is the best way to ensure my gif shows up in the top row and spans two columns in this grid?

I am attempting to create cards with a unique design where the first row consists of 2 columns, one being a GIF that shows the card fitting into a cell with a border. However, all I see is an empty cell without any display. Below is the code snippet I am ...

H1 tags are mysteriously popping up in the post above on my Wordpress theme

Recently, I came across an issue with the Wordpress theme I developed where the H1 article titles start floating up into the next article when resizing the browser window. Despite my efforts, I haven't been able to determine what is causing this. Any ...

Process of converting Ionic application for Android and iOS to APK format

I recently transformed my website into an ionic app, and I've noticed that the app size is almost 15MB. All my JS, HTML, and CSS files are currently stored in the www/app directory, with Bower components located in www/lib. To optimize the size of the ...

Loading HTML dynamically

Currently, I am working with node.js, express, and handlebars. When passing JSON data via res.render() to handlebars (hbs), I use {{#each dataJson}} to loop through the data and display it. However, if my JSON file had a large number of entries, loading t ...

struggling to browse through HTML files in eclipse while utilizing the Tomcat server

Using Eclipse Juno with Tomcat 7, I created a java dynamic web project and added a folder named home in the WebContent directory. Inside this folder, I included files address.jsp and h1.html. I wanted to link h1.html from address.jsp. The code I used was ...

Implement a context path in Angular 2 for enhanced functionality

Is there a way to change the base URL for my app from http://localhost:4200 to http://localhost:4200/pilot/? I attempted to modify the base href in index.html, but encountered an Uncaught SyntaxError: Unexpected token < This is the code snippet from m ...