Inconsistency in column widths

I'm attempting to recreate the layout of this table.

https://i.sstatic.net/ryKno.png

However, I am struggling to create uneven column widths for each td without breaking the structure of my table. Here is the code that I am using:

<div class="CenterThings">
    <table class="CenterThings">
        <tr>
            <th colspan="3" style="background-color:black;color:white;">Job Quotation</th>
        </tr>
        <tr>
            <td style="width: 328px">Address:<asp:TextBox ID="TextBox2" runat="server" Height="16px" Width="255px"></asp:TextBox>
            </td>
            <td style="width: 219px">Contact#:<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Job Description:
                <asp:TextBox ID="TextBox3" runat="server" Width="194px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Printing Process:
                <asp:TextBox ID="TextBox4" runat="server" Height="16px" Width="195px"></asp:TextBox>
            </td>
        </tr>
        <tr>
            <th colspan="3" style="background-color:black;color:white;">Specification</th>
        </tr>
        <tr>
            <td style="width: 328px">
                Quantity: 
            </td>
            <td style="width: 219px">
                Size:
            </td>
            <td>
                No.of pages inside: 
            </td>
        </tr>
        <tr>
            <td style="width: 328px">
                Material: 
            </td>
            <td style="width: 219px">
                Cover: 
            </td>
            <td>
                Inside: 
            </td>
        </tr>
    </table>
</div>

Here is the output it generates: https://i.sstatic.net/MEovE.png I aim to replicate the look of the first image or come close to it somehow.

Answer №1

If you want to add extra complexity to your layout, using nested tables is a great option. By placing a whole table inside a TD, you can achieve the desired effect.

<table id='outer_table'>
  <tr>
    <td>
       <table id='inner_table'>
        </table>
      </td>
    </tr>
  </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

Challenges with Aligning Panels in Column 6

My initial encounter with bootstrap was interesting. I attempted to have two panels placed side by side using the col-lg-6 class. The left panel was meant to be a link to an article, along with an image, while the right panel would serve as a signup/login ...

Unable to fetch local file using ajax from a local HTML page

According to Same Origin Policy, the SOP should not be applied to the file:// protocol. However, I'm having trouble with my code. I am running a testing page from my local system, and both when I try to access abc.txt in the same directory as the HTML ...

Using "overflow-x: hidden" is ineffective on mobile devices

I'm facing an issue where the CSS property overflow-x: hidden is not working on mobile devices. Here is a snippet of my HTML code: <div class="topbar"> <div class="navbar-brand float-left"> <a href="#"><img src="asset ...

Steps for displaying innerHTML values conditionally with a pipe

Currently working with Angular 8 and looking to conditionally implement the innerHTML feature using a translation pipe. .html <button type="button" mat-flat-button // utilizing translate module internally [innerHTML] = "display ? (HIDE ...

Is it feasible to utilize the .fadeTo() function in jQuery multiple times?

I need some help with writing a script that will display a warning message in a div tag every time a specific button is pressed. I chose to use the fadeTo method because my div tag is within a table and I want to avoid it collapsing. However, I'm noti ...

How can I center an image within another image in a two-column layout?

Hey there, I'm working on a 2-column layout where I need to position an image in the center of another one in the second column. However, my attempts at styling seem to be failing as the image keeps showing up in the top left corner of my page... Her ...

The perplexity of CSS Menus

I have this HTML code, but I'm not sure how to write the CSS so that the drop-down menu appears when I hover over the main li. <li><a href="#">#</a> <ul class="sub_menu"> <li><a hre ...

What is the reason for JQuery generating unnecessary <p></p> tags in this HTML code?

I attempted to use both the append and html methods in JQuery, but both approaches created a set of empty <p></p> tags before and after the <table> element when given this specific string: '<p>Blah blah my table below:</p&g ...

Issue with MVC List<> due to error in the model related to another model

An issue has been detected in List<Story>: an error message stating 'the type or namespace name 'List<>' could not be found (are you missing a using directive or an assembly reference?) (CS0246)' is displayed [project] ...

What is the best way to create the illusion of a swinging rope in an image?

How can I create a vertical image that appears to 'swing' back and forth on my website? I am looking to incorporate an image of a rope swinging subtly in the background as a theme for my site's animation. Is there a way to achieve this effe ...

Retrieving the Image of an Amazon Product using ASIN

My goal is to locate the image URLs for Amazon products using only their ASIN. For instance: This link pertains to a product with the ASIN B07NVVQL66 in the United States. Clicking on it will display an image of the product http://images.amazon.com/imag ...

Passing data from one NodeJS page to another

I am working on creating a User management system in Node. My goal is to have a page that displays all users in a table format. When the edit button is clicked, I want to navigate to another page with detailed information about the selected user. However, ...

What could be causing an ASP.net website to use excessive CPU resources despite having a small number of

We are currently developing a shopping cart website with over 100,000 products using the popular e-commerce platform NopCommerce version 2.3. To give you some background on NopCommerce, it is a widely recognized open-source e-commerce application built on ...

Achieving Vertical Alignment of Text with CSS

Can you figure out what's wrong with the placement of content outside the <footer> tag in this HTML? Also, why is the text not perfectly vertically middle-aligned? <html> <head> <style> body { ...

Combine various CSS rectangles into one cohesive design

Hey there! I have 3 unique rectangles defined in my css stylesheet. #background .icicle#ice1 { left: 24%; top: 0%; width: 2%; height: 8%; } #background .icicle#ice2 { left: 26%; top: 0%; width: 2%; height: 16%; } #backgro ...

Creating a slanted bottom edge on a div without compromising responsiveness

Is there a way to create a skew on the bottom side of a div without it being affected when the height and width change in responsive design? Check out the image for reference. I've attempted using the CSS transform property, but haven't been able ...

Tips for assigning a preset value to a checkbox

Is there a simple way to set the default Checked value of this angular checkbox? <p class="card-text">Please let me know which public organizations have been notified.</p> <div for="stakeholders" class="custom-control custom-c ...

Tips for choosing a specific set of list items using HTML

In my application, I have a list that is divided into sections like "currently viewing as," "recently viewed," and "staff." All elements in the list share the same classes, making it difficult to identify a specific list element in a particular section, su ...

Locating the ASP.NET validator's Control with the help of JQUERY or basic Javascript

On my webpage, I have several textboxes with corresponding ASP.NET validators for validation. I know that I can validate all the validators using a JavaScript function: Page_ClientValidate("myvalidators") where "myvalidators" is the group name of my val ...

Preventing right-aligned images from overflowing inside a div on Google Chrome

I am currently utilizing the jQuery cycle plugin to display a slideshow of images that floats to the right within an outer div element. The CSS I am using is as follows: .slideshow { float:right; margin-left: 20px; } The image alignment works per ...