CODEWITHSUNDEEP
htmlcsshtml-table
Martin AJ
Martin AJ

Reputation: 6707

How can I use span like table?

I have this HTML structure:

.subject{
    width: 50px;
}
<div>
        <span class = "subject">Name:</span>
        <span class="content">John</span>
</div>
<div>
        <span class = "subject">Age:</span>
        <span class="content">23</span>
</div>
<div>
        <span class="subject">cell phone:</span>
        <span class="content">+9400321532</span>
</div>

As you see, those columns aren't in the same line. I want this output:

/*
Name:       John
Age:        23
cell phone: +9400321532

How can I do that?

Actually I need a fixed-width for span.subject the size of biggest content length which is cell phone in this case.

Here is my code in reality:

.notifications_list{
	margin-top: 1px;
	padding-right: 15px;
	direction: rtl;
	overflow: scroll;
	width: 100%;
	height: 100%;
}

.notifications_list li{
	list-style: none;
}
.notification_date_title{
	font-size: 14px;
	margin-top: 10px;
}

.note_icon{
}

.note_icon i{
	font-size: 20px;
	margin: 0px;
}

.note_type{
	margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
  <div class="notification_date_title">امروز +5</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">دیروز +10</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">در هفته گذشته </div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
    </li>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
    </li>
  </ul>
</div>

Upvotes: 2

Views: 2560

Answers (5)

Sankar
Sankar

Reputation: 7117

Use display: table-cell;

.subject {
  display: table-cell;
  width: 80px;
}

div {
  display: table-row;
}
<div>
  <span class="subject">Name:</span>
  <span class="content">John</span>
</div>
<div>
  <span class="subject">Age:</span>
  <span class="content">23</span>
</div>
<div>
  <span class="subject">cell phone:</span>
  <span class="content">+9400321532</span>
</div>

Upvotes: 3

z0mBi3
z0mBi3

Reputation: 1544

You can make use of display table-row and table-cell to achieve this. Below code you can see that the width of the longest content is taken as the width if not it will take a min-width of 50px;

Hope this is what you are expecting :

.notifications_list{
	margin-top: 1px;
	padding-right: 15px;
	direction: rtl;
	overflow: scroll;
	width: 100%;
	height: 100%;
    display: table;
}

.notifications_list div, .notifications_list ul{
  display: table-row;
}

.notifications_list li{
	list-style: none;
}
.notification_date_title{
	font-size: 14px;
	margin-top: 10px;
}

.note_icon{
}

.note_icon i{
	font-size: 20px;
	margin: 0px;
}

.note_type{
	margin-right: 5px;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="notifications_list">
  <div class="notification_date_title">امروز +5</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">2 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">دیروز +10</div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">14 ساعت قبل</span></div></a>
    </li>
  </ul>
  <div class="notification_date_title">در هفته گذشته </div>
  <ul>
    <li><a><div><span class="note_icon"><i class="fa fa-check"></i></span><span class="note_type">تایید جواب</span><span class="note_date_time">2 روز قبل</span></div></a>
    </li>
    <li><a><div><span class="note_icon"><i class="fa fa-sort"></i></span><span class="note_type">رای</span><span class="note_date_time">3 روز قبل</span></div></a>
    </li>
  </ul>
</div>

Upvotes: 1

Abhishek
Abhishek

Reputation: 316

Try this also:

.subject{
    width: 50%;
  float:left;
}
.content{width: 50%;
float:right;
}
<div>
        <span class = "subject">Name:</span>
        <span class="content">John</span>
</div>
<div>
        <span class = "subject">Age:</span>
        <span class="content">23</span>
</div>
<div>
        <span class="subject">cell phone:</span>
        <span class="content">+9400321532</span>
</div>

Upvotes: 0

Sandip - Frontend Developer
Sandip - Frontend Developer

Reputation: 14699

Please try this:

.subject{
  width: 82px;   
  display: table-cell;
  float: left;
}

Upvotes: 1

Abhishek Pandey
Abhishek Pandey

Reputation: 13578

You can use display:table, display:table-row and display:table-cell to make span as table

Upvotes: 2

Related Questions