Formatting tabular rows to appear as headers

I am currently developing a mobile website that is specifically designed for older phones with minimal CSS and HTML support. Due to these limitations, I have decided to utilize tables in my design.

My goal on a certain page is to create a table row with a heading displaying a specific value, followed by another row in the same table that includes the value along with a link to edit it.

The issue I am facing is that the heading only spans one column, but I would like to style it with padding, margins, and a border.

Could someone offer some guidance on how to achieve this?

HTML

<div class="navalt">
    <table style="width:100%;">
        <tbody>
        <tr class="edHeading">
            <td><fmt:message key="editprofile.location"/></fmt:message></td>
        </tr>
        <tr>
            <td class="leftTd">USA</td>
            <td class="rightTd"><a href="">Edit</a></td>
        </tr>

CSS

.navalt {
    text-align:center;
    padding: 4px 0px 4px 4px;
    border-top: thin solid #C5C9D1;
    border- bottom: thin solid #C5C9D1;
}
.edHeading {
    padding: 4px 0px 4px 4px;
    background-color:#E9E1FF;
}
.leftTd {
    border-right: thin solid #C5C9D1;
    padding: 0px 0px 0px 5px;
    text-align:left;
    width:50%;
}
.rightTd {
    padding: 0px 5px 0px 0px;
    text-align:right;
    width:50%;
}
htmlcsshtml-table

Answer №1

One way, as mentioned by Wabs, is to add a colspan to the td in the header.

Alternatively, for better styling separation, you can utilize the thead tag since you already have <tbody>.

Just a side note: make sure to include closing tags for your div, body, and table. I'm assuming they were omitted due to partial code copying?

Check out this fiddle: http://jsfiddle.net/f6NKt/2/

The code snippet:

HTML

<table style="width:100%;">
  <thead>
    <tr>
      <th colspan="2">Heading - using th tags for location</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="leftTd">USA</td>
      <td class="rightTd"><a href="">Edit</a></td>
    </tr>
  </tbody>
</table>

CSS - notice the use of thead:


.navalt {
   text-align:center;
   padding: 4px 0px 4px 4px;
   border-top: thin solid #C5C9D1;
   border-bottom: thin solid #C5C9D1;
}

thead {
   padding: 4px 0px 4px 4px;
   background-color:#E9E1FF;
}

thead th {
   font-size:20px;
}

.leftTd {
   border-right: thin solid #C5C9D1;
   padding: 0px 0px 0px 5px;
   text-align:left;
   width:50%;
}

.rightTd {
   padding: 0px 5px 0px 0px;
   text-align:right;
   width:50%;
 }

Answer №2

It seems like you could enhance the header <td> by including colspan=2 so that it covers the entire table, unless I am mistaken.

<tr class="edHeading"><td colspan="2"><fmt:message key="editprofile.location"/></td></tr>

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

Drag Bootstrap panels to the edge of the column

I need to position two panels in a column, with one on the left and the other on the right. Currently, they are not aligned properly, as shown in this image: https://i.stack.imgur.com/RU636.png The first panel should be moved to the left to align with the ...

htmltwitter-bootstrapwebalignmentpanel

What is the procedure for assigning an element's background-color to match its class name?

Is there a way to use jQuery to make the background color of a span element match its class? $(function() { $("span").css("background-color") }); span { display: inline-block; width: 5px; height: 5px; border: solid #0a0a0a 1px; } <script src= ...

javascriptjqueryhtmlcss

"Enscroll – revolutionizing the way we scroll in

I recently incorporated the "enscroll" javascript scroll bar into my webpage. You can find more information about it at <div id="enscroll_name"> <ul> <li id="p1">product1</li> <li id="p2">product2</li> ...

javascriptjqueryhtmlcss

What steps can I take to stop a select box within a flex container from shrinking?

Currently working on some code that involves a flex container. Struggling to prevent fields from shrinking too much on smaller screen sizes. var crsdesc; //var for new window function popup(mylink) { if (!window.focus) return true; var href; if (t ...

htmlcssflexbox

Updating image source attributes for all images with HTML Agility

I'm facing an issue where I need to change all src attributes in the HTML code to absolute paths instead of relative paths. I attempted to solve this problem using HTML Agility: string html = "<body><div><img src=\"/folder/a.png&b ...

c#htmlhtml-agility-pack

Does CSS in the current IE9 beta allow for text shadows to be implemented?

Text shadows look great in Firefox and Chrome. For example, I have a basic website for streaming videos. Unfortunately, there are no shadows in IE9 for me. This is my CSS code: p { color: #000; text-shadow: 0px 1px 1px #fff; padding-bottom: 1em; } ...

javascriptcsshtmlshadows

Javascript function that sets the opacity to 0

Hello everyone, I'm new to SO and seeking some guidance on improving my post! I have a function that sets the opacity of an element to 0 in order to clear it. While this works fine, it becomes burdensome when dealing with multiple elements that requi ...

javascripthtmlfunction

Internet Explorer versions 9 and 10 do not support the CSS property "pointer-events: none"

In Firefox, the CSS property pointer-events: none; functions properly. However, it does not work in Internet Explorer 9-10. Are there any alternative approaches to replicate the functionality of this property in IE? Any suggestions? ...

javascripthtmlcssinternet-explorer

The dropdown feature on my theme seems to be malfunctioning on Wordpress

I'm having trouble figuring out what I'm doing wrong. The dropdown navigation works fine with the default Wordpress twentyeleven theme, but when I switch to my custom theme, the dropdown stops appearing. Here is the code I'm using: <div ...

javascriptjqueryhtmlwordpress

Is all of the CSS stored in one or multiple files?

Will the number of CSS files on my website impact its performance? I understand the necessity of having a separate file for print styles, but I'm wondering about the other CSS files. Is it better to have all my styles in one file or split them into mu ...

cssweb

Best Practices for Implementing the 960 CSS Clear Class

I'm puzzled by the necessity of using the clear class in the 960 css framework. Every time I remove a div with the clear class, everything seems to function properly. Can you explain to me the significance and purpose behind this class? ...

cssframeworks960.gs

JQuery fixed div bounces unpredictably when scrolling

Currently, I have a scenario on my webpage where there is a div called RightSide positioned on the far right side below another div named TopBanner. The TopBanner div remains fixed at the top of the screen even when the user scrolls down, which is exactly ...

javascriptjquerycsshtml

What causes the oninput event to act differently in Angular as opposed to regular JavaScript?

As I delve into learning Angular with TypeScript, I've encountered some inconsistencies compared to JavaScript that are puzzling me. Take for example this function that works flawlessly with pure JavaScript, where it dynamically sets the min and max a ...

javascripthtmlangulartypescript

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

What is the reason behind getElementsByClassName not functioning while getElementById is working perfectly?

The initial code snippet is not functioning correctly DN.onkeyup = DN.onkeypress = function(){ var div = document.getElementById("DN").value document.document.getElementsByClassName("options-parameters-input").style.fontSize = div; } #one{ heigh ...

javascriptjqueryhtmlcss

What is the proper syntax for using .focus() with the nextElementSibling method in typing?

As I strive to programmatically shift focus in my form using nextElementSibling, I encounter a challenge with typing variables/constants due to working with Typescript... I have managed to achieve success without typing by implementing the following: myF ...

javascripthtmltypescripttypeselement

The parent font size is influenced by the font size of the child element

I am encountering an issue with my code that seems to be quite simple. Here is the code snippet: <p> <h3>Title is here</h3> This is the paragraph </p> Here is the CSS: h2 {font-size:2.3em;} h3 {font-size:1em;} p {font-size:0. ...

htmlcss

Using a URL in the fill property is a simple process that involves specifying

Here is the snippet of the code I'm working with: <?xml version="1.0" standalone="no"?> <html> <head> <style> .someClass { fill:"url(#Pattern)"; } </style> ...

jqueryhtmlcsssvg

Creating a Canvas Viewport Tailored for Multiplayer Gaming

Lately, I've been playing around with the HTML5 Canvas while working on an io game. However, I've hit a roadblock when it comes to handling the viewport. Setting up the viewport itself isn't too complicated, but accurately displaying other p ...

javascripthtmlcanvasviewport

Picture transports during change

Is there a way to increase the size of images in a List without causing other images to move when hovered? Currently, when an image is hovered, it increases in size but causes the surrounding images to shift to a new line and I would like to avoid this beh ...

htmlcss