Challenge with aligning tables


I need assistance with aligning the TD tag value to the TH tag value as I am currently experiencing alignment issues. Can someone please help me resolve this problem?
I have attempted to fix it on jsfiddle Here is the HTML code:

<table class="table table-bordered">

    <tbody>
        <tr id="groupListHeader" class="row-fluid bold">

            <th>Organization<br/>
                <button id="A_1" class="sort_asc">↑</button><button id="D_1" class="sort_desc">↓</button>
            </th>

                <th>Group Code<br/>
                <button id="A_2" class="sort_asc">↑</button><button id="D_2" class="sort_desc">↓</button>
            </th>

                <th>Created On<br/>
                <button id="A_3" class="sort_asc">↑</button><button id="D_3" class="sort_desc">↓</button>
            </th>

                <th>Loan Profiles<br/>
                <button id="A_4" class="sort_asc">↑</button><button id="D_4" class="sort_desc">↓</button>
            </th>

                <th>Allocated<br/>
                <button id="A_5" class="sort_asc">↑</button><button id="D_5" class="sort_desc">↓</button>
            </th>

                <th>Need Detail<br/>
                <button id="A_6" class="sort_asc">↑</button><button id="D_6" class="sort_desc">↓</button>
            </th>

                <th>Rejected<br/>
                <button id="A_7" class="sort_asc">↑</button><button id="D_7" class="sort_desc">↓</button>
            </th>

                <th>To Publish<br/>
                <button id="A_8" class="sort_asc">↑</button><button id="D_8" class="sort_desc">↓</button>
            </th>

                <th>Not Allocated<br/>
                <button id="A_9" class="sort_asc">↑</button><button id="D_9" class="sort_desc">↓</button>
            </th>

        </tr>
        <tr>
        <td colspan="12" id="groupData">










        <table class="table">
        <tbody><tr>
        <td><a href="/borrowerReview/groupCodesAAView.action?fb=1&amp;fp=134871839">Freedom From Hungers</a></td>
        <td class="span2">
            <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=0">
                <span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="&lt;ul class=&quot;pull-0&quot;&gt;&lt;li&gt;Status : DRAFT&lt;/li&gt;&lt;li&gt;Tenure: 12&lt;/li&gt;&lt;li&gt;Expiry Date: 09-01-2013&lt;/li&gt; &lt;li&gt;Repayment Mode : EWI&lt;/li&gt;&lt;li&gt;Max Loans: 10&lt;/li&gt;&lt;/ul&...
htmlcsstwitter-bootstrap

Answer №1

Avoid using two tables, opt for a single table with headings and table rows only,

Check out the live demo here,

<div class="container">
    <div class="row">
        <div class="span12">
            <table class="table table-bordered table-condensed">
                <thead>
                    <tr>
                        <th>
                            Organization
                            <br>
                            <button id="A_1" class="sort_asc">?</button>
                            <button id="D_1" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Group Code
                            <br>
                            <button id="A_2" class="sort_asc">?</button>
                            <button id="D_2" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Created On
                            <br>
                            <button id="A_3" class="sort_asc">?</button>
                            <button id="D_3" class="sort_desc">?</button>                           
                        </th>
                        <th>
                            Loan Profiles
                            <br>
                            <button id="A_4" class="sort_asc">?</button>
                            <button id="D_4" class="sort_desc">?</button>                           
                        </th>
                        <th>Allocated
                            <br>
                            <button id="A_5" class="sort_asc">?</button>
                            <button id="D_5" class="sort_desc">?</button>
                        </th>   
                        <th>Need Detail
                            <br>
                            <button id="A_6" class="sort_asc">?</button>
                            <button id="D_6" class="sort_desc">?</button>
                        </th>
                        <th>Rejected
                            <br>
                            <button id="A_7" class="sort_asc">?</button>
                            <button id="D_7" class="sort_desc">?</button>
                        </th>
                        <th>To Publish
                            <br>
                            <button id="A_8" class="sort_asc">?</button>
                            <button id="D_8" class="sort_desc">?</button>
                        </th>
                        <th>Not Allocated
                            <br>
                            <button id="A_9" class="sort_asc">?</button>
                            <button id="D_9" class="sort_desc">?</button>
                        </th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
                            <td><a href="/borrowerReview/groupCodesAAView.action?fb=1&amp;fp=134871839">Freedom From Hungers</a>
                            </td>
                            <td class="col-md-2">   <a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=0">
            <span class="mttp-pop curpointer" data-placement="right" data-title="Group code detail" data-content="&lt;ul class=&quot;pull-0&quot;&gt;&lt;li&gt;Status : DRAFT&lt;/li&gt;&lt;li&gt;Tenure: 12&lt;/li&gt;&lt;li&gt;Expiry Date: 09-01-2013&lt;/li&gt; &lt;li&gt;Repayment Mode : EWI&lt;/li&gt;&lt;li&gt;Max Loans: 10&lt;/li&gt;&lt;/ul&gt;" data-original-title="" title="">
                Fre_Bro_7_05Jan13
            </span>
        </a>

                            </td>
                            <td>05-01-2013</td>
                            <td>0</td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=1">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=2">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=3">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=4">0</a>
                            </td>
                            <td><a href="/borrowerReview/viewLoanProfilesList.action?gc=587&amp;ls=5">0</a>
                            </td>
                            <td>    <a href="/borrowerReview/editLoanGroup.action?gc=587"><i class="icon icon-cog"></i></a>

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

Answer №2

Avoid using nested tables. Instead, when creating a table, you only need two rows defined with <tr>. The first row will hold the headers <th>, while the second row will contain all the data <td>

Example:

<table class="table table-bordered">
    <tr>
        <th>Name<br/>
            <button id="A_1" class="sort_asc">?</button><button id="D_1" class="sort_desc">?</button>
        </th>

        <th>Age<br/>
            <button id="A_2" class="sort_asc">?</button><button id="D_2" class="sort_desc">?</button>
        </th>

        <th>Date of Birth<br/>
            <button id="A_3" class="sort_asc">?</button><button id="D_3" class="sort_desc">?</button>
        </th>

        <th>Location<br/>
            <button id="A_4" class="sort_asc">?</button><button id="D_4" class="sort_desc">?</button>
        </th>

    </tr>
    <tr>
        <td>John Doe</td>
        <td>25</td>
        <td>01-01-1995</td>
        <td>New York</td>
        
    </tr>
</table>

Check it out here: http://example.com

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

Discover the elusive tag that holds the specified text

My code snippet in HTML looks like this: <body> <div class="afds"> <span class="dfsdf">mytext</span> </div> <div class="sdf dzf"> <h1>some random text</h1> ...

pythonhtmlbeautifulsouphtml-parsing

the quickest method to apply font-weight:bold; to the text within the component

Is there a way to apply font-weight: bold; only to the inner content of a component in a scss file while avoiding affecting the component tag itself? :host { font-weight: bold; } Although this code works, it also affects the component tag itself. What ...

cssangularsass

Parallax scrolling within a div creates a dynamic visual effect

Hello there, thank you for taking the time to read this. I am currently working on a website and encountering some challenges while trying to implement a specific effect. I am aiming to achieve a parallax effect similar to what can be seen on this page. As ...

jqueryhtmlcssparallax

What is the best method to retrieve a global variable from two separate PHP files?

Within file1.php, there is a variable: global $name; $name = ""; In the same directory, within file2.php, there is: <label> <span>Username:</span> <input id="name" type="text" name="username" value ="<?php echo $GLOBALS[& ...

phphtmlforms

Is Jquery struggling to modify the visual enhancements?

Check out this link, I need the sidebar design to be similar to what is shown in the provided link. Furthermore, I am looking for a way to have a pointer that follows along with my selection on different labels such as home, charts, etc. Can anyone assis ...

javascriptjqueryhtml

The synchronization issue between ng-class and animation

I'm experiencing a strange issue with ng-class and suspect that it may be related to a race condition. Here is the example on Plunker: example Below is the relevant JavaScript code: self.slideLeft = function() { if (self.end_index < se ...

javascripthtmlcssangularjs

"Maximizing the slider with jCarousel: A guide to enhancing your carousel experience

I recently added jcarousel to my website and things are looking good so far. Take a peek at how my site is currently set up: check it out! What I'm aiming for now is a feature where if a user clicks on an image to enlarge, it will open in a new tab ...

javascriptjqueryhtmlcssimage

What is the best way to adjust the z-index when hovering over an li element

In my <ul>, each <li> contains an image. I want these images to scale and become opaque upon hover. However, the issue is that when they scale, they get covered by the following image. Unsure if the z-index is correctly placed... Below is the C ...

cssz-indextransformscale

Processing .dat files using JavaScript

Currently, I am attempting to utilize JavaScript to upload a file named example.dat. Initially, I believed that the correct approach would be using fileReader; however, it appears that this method is unable to process this specific format. The objective i ...

javascripthtmldataviewphaser-framework

Is there a way to arrange the cards in a row so they fill up the grid before moving on to the next row?

After retrieving data from a table in my database, I am displaying it on the screen as cards. However, the issue is that all the cards are displaying on the left side of the screen in a single column, rather than appearing in rows of 3 as desired. Below i ...

cssdjangotwitter-bootstrapbootstrap-4flexbox

The title element is persistently appearing on the same line

As a beginner, I've created a document with a 3x3 checkerboard using HTML and CSS. However, I'm facing an issue where the heading element is not displaying on a separate line as expected. I believe the problem lies in the CSS styling, specifical ...

htmlcsspositioncss-float

Developing an interactive website utilizing AngularJS, WCF Service, and SQL Server

Exploring the possibilities of creating a web application, I stumbled upon AngularJS. With plans to incorporate WCF Service and SQL Server into my project, I am intrigued by what these technologies can offer. I want to ensure that AngularJS aligns with my ...

javascriptjqueryhtmlwcfangularjs

Adjusting the position of text within a table cell using HTML

My task is to design a website using only tables (the old-fashioned way). I've made some progress with the layout, but being limited to tables and HTML poses some challenges. <body> <table width="1173" height="703" cellspacing="0" cellpaddi ...

html

What is the best way to incorporate progressive JPEG images onto a website?

I am currently working on a website called winni.in that is built using Java, Html, and Javascript. I would like to incorporate progressive image rendering upon page load, but I lack the necessary knowledge. I have come across and explored the following re ...

javascriptjqueryhtmlcssjpeg

Buttons aligned vertically alongside an input text field

I am trying to align two buttons vertically under an input text box with the middle aligned. This is what I have done so far: jQuery(document).ready(function($) { // Implementing bootstrap minus and plus plugin // Reference: http://jsfiddle.net/lael ...

javascriptjqueryhtmlcss

The margin-bottom CSS class is integrated within Twitter Bootstrap

Is there a standard margin bottom class that can be used? I attempted to use bottom5 like this: <div class="col-lg-2 bottom5"></div> However, it did not have the desired effect. ...

csstwitter-bootstraptwitter-bootstrap-3

Adding margin to an HTML element causes the entire page to shift downward

Despite successfully applying margin to other elements, I encountered an issue with #searchbarcontainer where it causes the entire page to shift downward. My goal is to center it slightly below the middle of the page, but I'm struggling to find a solu ...

htmlcssbootstrap-5

Searching for nested divs with the same class name in jQuery can be achieved by using the

Need assistance in locating all divs with a specific class name. Some divs may have nested divs with the parent div's class name. Take this scenario for example: <div class="myForm"> <div class ="myDiv"> <div class ="myDiv"> ...

javascriptjqueryhtml

The height of the footer element is gradually dwindling

Have you ever wondered why a footer element mysteriously shrinks in height when the browser window is resized? I attempted to create a fiddle with my code, but unfortunately, it's not replicable on JSFiddle so I won't be sharing it. This is how ...

htmlcss

CSS Horizontal Menu positioned left losing its background color due to float property

Can you explain why the background color of the ul element disappears when its child elements are floated? I have a vague memory of reading something about floats causing this issue, but I can't recall the details. (JSFiddle) ul { padding-left: ...

htmlcss