CODEWITHSUNDEEP
htmlcss
user2544133
user2544133

Reputation:

Format table content in CSS

Right now I've got table that looks like this: enter image description here

Part of HTML code where table content is stored:

<table class="mTable">
    <tbody>
        <tr>
            <td id="c00">
                <div class="in_val">~val(0)~</div>
                <div class="in_ti">~name(0)~</div>
                <div class="in_to">~unit(0)~</div>
            </td>
            <td id="c01">
            <td id="c02">
        </tr>
    </tbody>
</table>

CSS code:

.in_ti
{
  padding:2px;
  vertical-align:top;
  display:table-cell;
}

.in_val
{
  font-size: 38px;
  font-weight: bold;
  display:table-cell;

}

.in_to
{
  float:right;
  clear:right;
  padding:2px;
}

And I'm trying to recieve table that would looks like that: enter image description here

Describing: I would want to get text format in table where name is on the top center of the cell of table, and value (val) and unit are on the bottom center of the cell of table in one line. I tried using display: inline, but I didn't get any difference.

Upvotes: 1

Views: 65

Answers (1)

Rotan075
Rotan075

Reputation: 2615

A few things are needed to achieve this desired lay-out. First if you want to have the name as first element you should also place that within your html:

<div class="in_ti">~name(0)~</div>
<div class="in_val">~val(0)~</div>                
<div class="in_to">~unit(0)~</div>

First the name than the value and unit.

Then you can add to the class of the name the following code:

.in_ti
{
  padding:2px;
  vertical-align:top;
  display:block;
  text-align:center;
}

I added display:block and text-align:center to make sure that the text is on 1 line.

For the value and unit I added the following CSS (remove the bg colors they are just for visual aspect to see how large the width of the object was):

.in_val
{
  font-size: 32px;
  font-weight: bold;  
  display:block;
  float:left;
  width:70%;
  background-color:red;
}

.in_to
{
  display:block;
  float:left;
  width:30%;
  line-height:36px;
  background-color:yellow;
}

Wrapping it all up you get this result: JSFIDDLE

Upvotes: 1

Related Questions