CODEWITHSUNDEEP
htmlcsshtml-table
Juan Salvador Portugal
Juan Salvador Portugal

Reputation: 1329

Trying to display two lines inside one row in html

I am working with a project in ASP MVC and Bootstrap where I have the need to show the regulation of a transformer, this is represented in the following way:

enter image description here

I was trying to do it in the following way but I did not achieve the result that I intend:

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

Upvotes: 3

Views: 3621

Answers (3)

Lahar Shah
Lahar Shah

Reputation: 7682

Here is something you can start with:

.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>

Upvotes: 1

Stickers
Stickers

Reputation: 78786

You're on the right track of using rowspan with table. I completed it with the example below, and it's better to use 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>

Upvotes: 4

hypern00b
hypern00b

Reputation: 350

You can try something similar to what I've posted. If you only need to do something like this once or twice this will get you by. If you need to use math/science notations frequently it probably isn't practical.

* {
  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>

Upvotes: 1

Related Questions