Attempting to showcase two lines within a single row on an html page

Currently, I am working on a project involving ASP MVC and Bootstrap where I need to display the regulation of a transformer in a specific format. This representation can be seen in the image below:

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

My attempt to achieve this display using the following code snippet did not yield the desired outcome:

<table>
  <tr>
    <td rowspan="2">132 &#177;</td>
    <td>12x1,5 %</td>
  </tr>
  <tr style="margin-top: 0px;">
    <td>8x1.5%</td>
  </tr>
</table>

htmlcsshtml-table

Answer №1

You're headed in the right direction by utilizing the rowspan attribute in a table. Here is an example with the code snippet below, emphasizing the use of monospace fonts.

table {
  font-family: monospace;
}

td[rowspan] {
  font-size: 1.5em;
}
<table>
  <tr>
    <td rowspan="2">(132</td>
    <td>+ 12x1,5 %</td>
    <td rowspan="2">)/13,86kV</td>
  </tr>
  <tr>
    <td>- 8x1.5 %</td>
  </tr>
</table>

Answer №2

Let's get started with this:

.txt{ height: 40px; display: table-cell; vertical-align: middle; }
.supsub { display: inline-block; }
.supsub sub { top: .3em !important; }
.op {  font-size: 36px }
.supsub sup, .supsub sub {
    position: relative;
    display: block;
    font-size: .8em !important;
    line-height: 1.2;
}
<span class="main">
    <span class="op">(</span>
    <span class="txt">
        132
    </span>
    <span class="supsub">
        <sup>&#43; 12x1,5 %</sup>
        <sub>&#8722; 8x1.5%</sub>
    </span>
    <span class="op">)/</span>
    <span class="txt">
        13,86 KV
    </span>
</span>

Answer №3

If you're looking for a solution similar to what I've provided, give this a try. It should work well for occasional use, but if you find yourself needing to work with math and science notations frequently, it may not be the most practical option.

* {
  padding:0;
  margin:0;
  box-sizing:border-box;
  text-align:center;
}

.container {
  width:250px;
  height:75px;
  display:flex;
  flex-direction:row;
  align-items:center;
}

.left {
  display:flex;
  flex:1;
  height:100%;
  align-items:center;
  justify-content:center;
}

.top-bottom {
  display:flex;
  flex:1;
  height:100%;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}

.top {
    display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50%;
}

.bottom {
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:50%;
  border-top:1px solid green;
}

.right {
  display:flex;
  align-items:center;
  justify-content:center;
  flex:1;
  height:100%;
}
<div class="container">
  <div class="left">132 &#177;
  </div>
  <div class="top-bottom">
      <div class="top">12 &times; 1.5%
      </div>
      <div class="bottom">8 &times; 1.5%
      </div>
  </div>
    <div class="right">/ 13.86kV
    </div>
  </div>

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

Automating the process of submitting a checkbox

Displayed below is a mix of HTML and JavaScript: <form method = "post" style="display: inline;" name="thisform<?php echo $employee->id; ?>"> <input type="hidden" name="user" value="<?php echo $employee->id; ?&g ...

phpjavascripthtmlforms

Unexpected behavior occurs when attempting to run an HTML string within a Python file

After inputting the following code, I am getting a blank HTML page. Despite including an <h1> and an <a href> tag, only the <title> tag is being executed. Can anyone shed light on why this is happening and offer guidance on how to resolve ...

pythonhtmlpython-3.x

Discovered a critical vulnerability that requires your attention. Execute `npm audit fix` to resolve the issue, or use `npm audit` for more information

After attempting to install mysql using 'npm install mysql', I encountered an error message stating: "found 1 critical severity vulnerability run npm audit fix to fix them, or npm audit for details" Following this, I proceeded with 'npm au ...

htmlnode.jsdatabaseamazon-web-servicesnpm

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

Having trouble embedding Hangouts button in HTML template using script tags

When I include a Hangouts button on my index page, it is visible and functional as expected: <body ng-app="sampleApp" ng-controller="MainCtrl"> <div class="row"> <div class="col-md-12 m-body"> <div class="m ...

javascripthtmlangularjsgoogle-hangouts

Is there a way to adjust the dimensions of the <audio> tag using CSS?

//I am trying to adjust the size of the audio player based on the 'height' and 'width' properties, but it doesn't seem to be working as expected. <audio autoplay controls height="100px" width="100px"> ...

html

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

The website is experiencing display issues when viewed on Internet Explorer 10 and above

I am currently managing a few websites running on aspx with an older version of DNN 4.x. While these sites display properly on Google Chrome, Fire Fox, Opera, etc., I have noticed that there are rendering issues specifically on IE 10 and above for the navi ...

htmlcssinternet-explorer-10internet-explorer-11

The newly added radio button does not function as a separate group as expected

I currently have a set of radio buttons: <input type="radio" class='form-control' name="progress_type[]" value="Journal Papers"><span class='radio-label'>Journal Paper</span> <input type="radio" class='form-co ...

javascriptjqueryhtmlradio-button

*ngIf doesn't seem to be functioning as expected compared to other *ngIf directives

Encountering a peculiar issue with my *ngIf related to the isAdmin variable which determines whether the list of users in userList should be displayed or not. Strangely, it seems to behave differently compared to other *ngIf statements within the same comp ...

javascripthtmlangularmeteor

Using SCSS based on the browser language in Angular: A Step-by-Step Guide

Is there a way to implement SCSS that is dependent on the user's browser language? When I checked, I found the browser language specified in <html lang = "de"> and in the CSS code as html[Attributes Style] {-webkit-locale: "en&quo ...

cssangulartypescriptsass

Struggling to add a line break in my code

class Test extends React.Component{ state={name: "John", numTimes: 2}; render() { let output = "" for (let i = 1; i <= this.state.numTimes; i++) { let evenOdd = i % 2 if (evenOdd === 0) { output += i + ". Hello " + this.state.name + ...

javascripthtmlcssreactjsjsx

Preventing the build-up of opacity animations in jQuery: Tips and tricks

-I have two division tags in my code. <div id="div1">Hover over me to show Div2</div> <div id="div2">Div2</div> -I used CSS to set the opacity of div2 to 0. -My goal is for div2's opacity to change from 0 to 1 when hovered o ...

javascriptjqueryhtml

What are some ways to display alternative content when JavaScript is not enabled?

When JavaScript is disabled, I want to display an entirely different set of content. While I am aware that the <noscript> tag can be used for this purpose, how can I ensure that the remaining page elements are hidden as well? Any suggestions would b ...

javascriptjqueryhtmlcss

Press the "show additional content" button on the nytimes.com website using selenium

I'm experiencing difficulty scrolling through this webpage. Once I reach the bottom of the page, I am unable to locate and click on the "SHOW MORE" button using selenium. self.driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") ...

pythoncssseleniumselenium-webdriverweb-scraping

Align the image in the center of the page horizontally

Is there a reason why aligning an arbitrary image horizontally is so challenging (or as one response mentioned, "It is not possible.")? I previously had centered images that were functioning correctly for years; however, suddenly they stubbornly position t ...

htmlcssimagecentering

Is it feasible to conceal a certain field once the user has chosen another field?

Looking to create an IF statement that will help me establish a specific rule. On a customer portal page, customers can open tickets via a form where they provide information such as "software product" and "environment" from dropdown lists, as well as othe ...

javascripthtmljquerycss

Detecting single letters in a sentence and changing their appearance using CSS

Looking to make a subtle change to text? I need to swap out single letters in a passage (I have a cat that ate a fish). Any ideas on how to do this? The goal is to input a block of text into a textbox, then display it in a div. I've had difficulty fi ...

javascriptjqueryhtmlcssjquery-selectors

Encrypting and salting the data provided by the user

Similar Question: Secure hash and salt for PHP passwords My current code snippet is as follows: $insert_query = 'insert into '.$this->tablename.'( name, email, username, password, confirmcode ...

phphtmlsalt

Activating Bootstrap modal when a navigation link is clicked

Just started a site for a client and new to Bootstrap. I've got the layout down - full-width page with "Top Nav" within the nav bar, looking to create a modal effect drop-down. When clicking on "About", it should trigger the .modal function. However, ...

javascriptjqueryhtmlcsstwitter-bootstrap