Is it possible to left/right align text via table in markdown?

StackOverflow https://stackoverflow.com//questions/9642510

  •  10-12-2019
  •  | 
  •  

Question

What I'm trying to accomplish is this:

Name Surname                                                      Phone: 123
Joe Cool                                                          Fax: 123
Charlie Brown                                                     Email: 123

Some more text goes here, after these two introductory columns. Normal text just  
keeps going, and going, and going ...

that is to align the right column of text? Is it possible to make that via Markdown, or maybe via HTML or CSS tables, but in such a way that a table border isn't visible?

Was it helpful?

Solution

Here the HTML and CSS as per your question.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
.panel-inside { 
    padding-left: 0px;
    padding-right: 0px;
    overflow:auto;
} 

.row                                   
{
    height: 30px;      
    width:100%;        
    vertical-align:middle;
}

.label                               
{
    font-size: 12pt;
    display:inline;    
    float:left;
    margin-left:5px;
    width:200px;
}

.label-right
{
    font-size: 12pt;
    color:#686868;
    display:inline;    
    float:right;
    margin-right:7px;  
    width:200px;
}

.listSeparator                
{
    clear:both;
    height:0;
}

</style>
</head>

<body>

<div class="panel-inside">
    <div class="row">
        <div class="label">Name Surname </div>
        <div class="label-right">Phone: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Joe Cool</div>
        <div class="label-right">Fax: 123</div>
    </div>
    <div class="listSeparator">&nbsp</div> 
    <div class="row">
        <div class="label">Charlie Brown</div>
        <div class="label-right">Email: 123</div>
    </div>
</div>
<div id="content">
    <p>Some more text goes here, after these two introductory columns. Normal text just keeps going, and going, and going ...
</p>
</div>

</body>
</html>

For output here is the fiddle: http://jsfiddle.net/LsGSc/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top