Ensure that two cells within the same row of two tables are equal in width

I have 2 tables in the same row of a large table, set up like this:

 <table>
        <tr>
            <td>Type</td>
            <td>Storage 1</td>
            <td>Storage 2</td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr>
                        <td>Type A</td>
                    </tr>
                    <tr>
                        <td>Type B</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>10%</td>
                    </tr>
                    <tr>
                        <td>90%</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr>
                        <td>40%</td>
                    </tr>
                    <tr>
                        <td>60%</td>
                    </tr>
                </table>
            </td>
        </tr>
    <table>

If the text in the first column (e.g., "Type A") is too long and wraps onto a new line, the data in the same row does not remain aligned properly. ("Type B" appears on a different line than "90%" and "60%")

The desired output should be in XML format, structured as follows:

<DataGroup Storage="Storage 1">
    <DataRow Type="Type A" Percentage="10%"/>
    <DataRow Type="Type B" Percentage="90%"/>
</DataGroup>
<DataGroup Storage="Storage 2">
    <DataRow Type="Type A" Percentage="40%"/>
    <DataRow Type="Type B" Percentage="60%"/>
</DataGroup>

To display borders making it appear as one cohesive table, you need to render it in a cshtml file.

How can I fix this issue? Thank you for your help.

htmlcss

Answer №1

To create a table-like structure, simply add the CSS code border: 1px solid black;. In your HTML, you only need to use one table element.

table,
th,
td {
  border: 1px solid black;
}
<table>
  <tr>
    <td>Type</td>
    <td>Storage 1</td>
    <td>Storage 2</td>
  </tr>
  <tr>
    <td>Type A
      <br>new line</td>
    <td>10%</td>
    <td>40%</td>
  </tr>

  <tr>
    <td>Type B</td>
    <td>90%</td>
    <td>60%</td>
  </tr>
</table>

Answer №2

To prevent word-wrap, you can use white-space: nowrap;, however, this may disregard the width element.

tr td:nth-child(1){
  width:20px;
  color:red;
  white-space: nowrap;
}
<table>
<tr>
   <td>Type</td>
   <td>Storage 1</td>
   <td>Storage 2</td>
</tr>
<tr>
   <td>Type A</td>
   <td>10%</td>
   <td>40%</td>
</tr>
<tr>
   <td>Type B</td>
   <td>90%</td>
   <td>60%</td>
</tr>
<table>

Answer №3

It seems like you have a specific reason for nesting tables within a table. The issue at hand appears to be related to semantics, where the data for 'Type B', '90%', and '60%' is not appearing on the same rows in the main table. To address this, you can either align your sub-tables as blocks using vertical-align, or alter the structure of your big table to something similar to the following example:

 <table class="big">
    <tr>
        <td>Type</td>
        <td>Storage 1</td>
        <td>Storage 2</td>
    </tr>
    <tr>
        <td>
            <table class="small">
                <tr>
                    <td>Type A Lorem ipsum</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="small">
                <tr>
                    <td>10%</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="small">
                <tr>
                    <td>40%</td>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table class="small">
                <tr>
                    <td>Type B</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="small">
                <tr>
                    <td>90%</td>
                </tr>
            </table>
        </td>
        <td>
            <table class="small">
                <tr>
                    <td>60%</td>
                </tr>
            </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

Is there a way to make Chrome ask to save a password within an HTML form?

I'm having trouble getting a basic email/password HTML form to prompt Chrome to save the password. Despite following examples, it's not working for me. Here is my code: <form name="loginForm" action=""> E-Mail:<br><input ...

html

Having trouble with a JavaScript function and tag that don't seem to be working in Chrome, but function well in Mozilla Firefox. Can anyone provide assistance with

Below is the code for creating two dropdowns: one for "Property Type" and the second for "Property Sub Type". This code works fine in Firefox but not in Chrome. When selecting "residential" as the property type, only residential values will appear in the ...

javascripthtmlgoogle-chromejspbootstrap-4

Creating a great user experience with Knockout JS and Bootstrap Modal

I created a straightforward webpage with a button that triggers the opening of a modal. You can view all my code in this JSFiddle: JS Fiddle Also provided below: $('#displayDetails').click(() => { let obj = { Overview: ' ...

javascripthtmljqueryknockout.jsbootstrap-modal

Switching Text in ReactJS from V to X: A Tutorial

I have been utilizing a Switch component from react-switch in my project. import Switch from 'react-switch'; render() { return <Switch onChange={this.onChangeStatus} onClick={this.onChangeStatus} c ...

cssreactjs

selenium cannot detect the button's visibility even though it has been fully loaded

My goal is to automate the process of searching for 'easy apply' jobs on LinkedIn. However, I am encountering an error message saying "could not be scrolled into view" when attempting to click the 'Apply' button for 'easy apply&ap ...

pythonhtmlseleniumlinkedin-api

appear on the screen of a Samsung smart television

Can anyone offer some assistance? I am currently working on this in JavaScript. $('#popup').sfPopup({ text: 'Would You like to close this popup?', buttons: ['Yes', 'No'], defaultFocus: 1, ...

jqueryhtmljquery-uisamsung-smart-tv

What is the best way to show a message within a specific HTML division with JavaScript?

Here's my attempt at solving the issue: <head> <script> function validateForm() { var username = document.forms["login"]["uname"].value; var password = document.forms["login"]["pwd"].value; if (username == "" || p ...

javascripthtml

Creating a floating div that remains in place without disturbing the layout of the surrounding elements on

I am trying to place a div within a page at specific coordinates without affecting the rest of the content on the page. My initial approach was to give the parent container a position: absolute and the floating div a position: relative, then setting the p ...

htmlcss

How to ensure HTML elements are styled to occupy the full width of their parent container while respecting the minimum width requirement

Is there a way to make HTML elements have a width ranging from 150px to 200px while filling up 100% of their parent's width? Check out Image 1: https://i.sstatic.net/nYNGp.jpg And here is Image 2 (after resizing the window): https://i.sstatic.net/ ...

htmlcssflexbox

What is the best way to make a sliding DIV appear at the edge of the browser window?

I recently came across a really interesting effect on a webpage. After arriving on the page, a slide-in window appears after about a minute. It slides in from the right side, remains at 250x180 for around ten seconds, then shrinks to 250x50 and stays visib ...

jquerycss

What method is being used by this website to carry out this specific task?

I recently came across this website, , and I was intrigued by the functionality of the matrix entry feature. By clicking on the bracket icon next to the H2O icon, you can access it. Upon accessing the matrix entry function, users are prompted to input th ...

htmlcss

Elevate your web design by transitioning from Bootstrap 4 to Bootstrap 5

Should I upgrade a large project from Bootstrap 4 to version 5? Will it require extensive changes in each file? After updating my project, many components have stopped working: Dropdowns Accordions and more Is this a common issue experienced by everyo ...

htmlbootstrap-4migrationbootstrap-5

Preventing Canvas Image Disappearance with JavaScript's onload Event

My current issue involves adding an Image to my webpage. However, every time I hit the refresh button, the image disappears. After researching on Stack Overflow, it was suggested to include window.onload=yourDrawFunction() in the code. Despite following th ...

javascripthtmlcsscanvas

What is the best way to ensure consistent heights among my Bootstrap flex child elements?

It has come to my attention that the new version of Bootstrap (v4) utilizes flex to present elements within a box, providing more flexibility for alignment. On my webpage, I am dealing with three boxes that have equal heights. However, the inner white elem ...

htmlcsstwitter-bootstrapbootstrap-4flexbox

Creating a CSS class dynamically with AngularJS: A step-by-step guide

I'm working on an Angular JS website that pulls data from an API to create a dynamic CSS class. This class will be used to format other data being displayed on the page. Is there a way for Angular JS $scope data to be generated in the Controller whil ...

cssangularjsclassdynamically-generated

Tips for customizing checkbox appearance when the checkbox and label are contained in separate div elements

Hi there, I have a specific design requirement where I've created separate div sections for checkbox and label elements. I'm having trouble styling the checkbox when these elements are placed inside divs. Everything works fine when the checkbox a ...

htmlcss

The information about the property is not appearing on the screen

I included the following CSS: nav label:AFTER { content: " ▾"; } However, when viewed in Chrome, it appears like this: content: " â–¾"; I have already added <meta charset="utf-8"/> to my JSP page and @CHARSET "utf-8"; in my CSS file. ...

cssspring-mvc

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

I am having a slight issue with my dropdown button where I am trying to display the selected item as the value of the dropdown button. The Flag Icon and Text should be changing dynamically. I have tried some examples but it seems that it is not working as ...

javascripthtmljquerybootstrap-5

Guide on how to print a particular DIV along with its corresponding CSS styling

Is there a way to print a specific DIV in JavaScript while including the styles within it? I have searched through several posts, but haven't found a solution that suits my needs. Is there a single function in JavaScript that can accomplish this? I h ...

javascripthtmlcssprinting

Inject customized CSS following third-party plugin stylesheets in WordPress

I am currently exploring methods to incorporate a custom.css file after the loading of a third-party plugin. I am familiar with registering and enqueueing CSS files in functions.php. Is it possible to establish a dependency for the stylesheets of the thi ...

csswordpress