CODEWITHSUNDEEP
htmlcss
coder
coder

Reputation: 642

How to give margin inside td in table html?

My html code is

My fiddle is https://jsfiddle.net/ph8b2d34/1/

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left: 100px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td class="ars">1. District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td class="ars">2. Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td class="ars">3. Date & Time </td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td class="ars">3. Particulars of  search</td>
     </tr>
     <tr> 
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td class="ars">4. The email id you are using and the corresponding address and phone number along with fathers name</td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

The problem is that for no. 4, the multi line text is not aligned. It should come as

4. The email id you are using and the corresponding address and phone number 
   along with fathers name

The text should not come below the numeric 4.The multi line text should have a margin. I am not getting the same... Can anybody please help me to solve the problem..

Upvotes: 1

Views: 22649

Answers (5)

Adri&#224; Garrido
Adri&#224; Garrido

Reputation: 15

I know there's more than a year from the question, but I would like to take another approach.

As my understanding, what you have is an ordered list, so maybe an <ol> with an start attribute would make the job.

.ars{
    width: 350px;
    height:40px;
    font-size: 20px;
    text-align: left;
    padding-left: 100px;
    vertical-align: top;
}
.ams{
    vertical-align: top;
    padding-left: 8px;
}
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left: 100px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td class="ars">1. District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td class="ars">2. Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td class="ars">3. Date & Time </td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td class="ars">3. Particulars of  search</td>
     </tr>
     <tr> 
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td class="ars">
      <ol start="4">
      <li>The email id you are using and the corresponding address and phone number along with fathers name
      </li>
      </ol></td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

Upvotes: 0

bitsobits
bitsobits

Reputation: 104

The text is coming below the numeric 4 as html is taking whatever is inside <td> tag as the entire content. It cannot differentiate between 4 and The email id you are using and the corresponding address and phone number along with fathers name. I would recommend to have the serial no. as part of another <td> tag.

Upvotes: 1

user10180142
user10180142

Reputation: 

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <style type="text/css">
    td{
    vertical-align: top;
    }

        .ars{
            width: 350px;
            height:40px;
            font-size: 20px;
            text-align: left;
            padding-left:px;
            vertical-align: top;
        }
        .ams{
            vertical-align: top;
            padding-left: 8px;
        }
    </style>
<table>
  <tr> 
    <td width="30px">1.</td>  
    <td class="ars">District</td> 
    <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
     </tr>
      <tr> 
     <td>2.</td>
     <td class="ars">Station</td>
     <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td> 
     </tr> 

     <tr> 
     <td>3.</td>
     <td class="ars">Date & Time</td>
       <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td> 
    </tr>

     <tr> 
     <td>3.</td>
     <td class="ars">Particulars of  search</td>
     </tr>
     <tr> 
     <td></td>
     <td class="ars">&emsp;a)What are you wearing</td>
     <td>: <a style="padding-left: 8px;">no</a> </td> 
     </tr> 
     <tr> 
     <td>4.</td>
     <td class="ars">The email id you are using and the corresponding address and phone number along with fathers name</td>
     <td>:</td> 
       </tr>
  </table>
</body>
</html>

Here is a solution of your problem you don't need to give left margin in a particular div and also you need to add one more td in every row for Numerical Bullets this make same width for all Numerical bullet

Hope you can understand.

Upvotes: 1

Charu Maheshwari
Charu Maheshwari

Reputation: 1643

I have updated the fiddle for you. Please find it at https://jsfiddle.net/ph8b2d34/11/

.ars1 {
    padding-left: 120px;
    position: relative;
}
.ars1:before {
    content: '4.';
    position: absolute;
    font-size: 20px;
    margin-right: 10px;
    left: 100px;
 }

<td class="ars ars1">The email id you are using and the corresponding address and phone number along with fathers name</td>

Upvotes: 1

Matt
Matt

Reputation: 492

I hope it could help:

   .ars {
      width: 350px;
      height: 40px;
      font-size: 20px;
      text-align: left;
      padding-left: 100px;
      vertical-align: top;
    }
    
    .ams {
      vertical-align: top;
    }
    
    .test {
      margin-top: -23px;
      margin-left: 20px;
    }
<!DOCTYPE html>
<html>

<head>
  <title></title>
</head>

<body>
 
  <table>
    <tr>
      <td class="ars">1. District</td>
      <td class="ams">:<a style="padding-left: 8px;"> ktm qwerty</a></td>
    </tr>
    <tr>
      <td class="ars">2. Station</td>
      <td class="ams">:<a style="padding-left: 8px;"> new york city</a></td>
    </tr>

    <tr>
      <td class="ars">3. Date & Time </td>
      <td class="ams">:<a style="padding-left: 8px;">01-01-2018 </a></td>
    </tr>

    <tr>
      <td class="ars">3. Particulars of search</td>
    </tr>
    <tr>
      <td class="ars">&emsp;a)What are you wearing</td>
      <td>: <a style="padding-left: 8px;">no</a> </td>
    </tr>
    <tr>
      <td class="ars">
        <span>4.</span>
        <p class="test">The email id you are using and the corresponding address and phone number along with fathers name</p>
      </td>


      <td>:</td>
    </tr>
  </table>
</body>

</html>

Upvotes: 4

Related Questions