How to give margin inside td in table html?

html table margin
table-cell margin
cell paddingin html
html table padding-left
html table row padding
asp table cell padding
bootstrap table cell padding
td margin-left not working

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

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>

CSS Properties/Table Styles/table margin, How do you change the margins in a table cell? <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

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>

table cellpadding, If you have control of the width of the table, insert a padding-left on all table cells and insert a negative margin-left on the whole table. Note, the width of the table needs to include the padding/margin width. Using the above as an example, the visual width of the table will be 700px. Try it Yourself - Examples. Table headers How to create table headers. Table with a caption An HTML table with a caption. Tags inside a table How to display elements inside other elements. Cells that span more than one row/column How to define table cells that span more than one row or one column.

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

Is it valid to assign ID to TR or TD in table?, The left side of the table I need a margin on the left of the tr but the line less code although it relies a bit on magic numbers to make it work. CSS Margins. The CSS margin properties are used to create space around elements, outside of any defined borders.. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).

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.

CSS Cell Margin, Im getting a padding effect (padding set to 0) for a TD element when viewed in firefox but not when in IE ?? Is this a bug in firefox ?? Try it Yourself - Examples. Table headers How to create table headers. Table with a caption An HTML table with a caption. Tags inside a table How to display elements inside other elements. Cells that span more than one row/column How to define table cells that span more than one row or one column.

Table cell margins? - HTML & CSS, The style attribute specifies an inline style for an element. The attribute is used with the HTML <table> tag, with the CSS property padding. HTML5  The look of an HTML table can be greatly improved with CSS: Alfreds Futterkiste. Berglunds snabbköp. Christina Berglund. Centro comercial Moctezuma. Francisco Chang. Königlich Essen. Laughing Bacchus Winecellars. Yoshi Tannamuri. Magazzini Alimentari Riuniti. Giovanni Rovelli. Try it Yourself » To specify table borders in CSS, use the border

TABLE > TD padding - HTML & CSS, Set margin and padding for td tag. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html​  Just keep in mind, the usage of style attribute overrides any style set globally. It will override any style set in the HTML <style> tag or external style sheet. You can try to run the following code to set cell padding in HTML. We’re also using the <style> tag and the style attribute to style the table. Example. Live Demo

HTML table tag, Styling HTML Tables: How to Apply Margin, Border and z-index on Table Elements Inside the <thead> element we have our main header and beneath it several as using margin is to add border-top: 1em onto the <tbody> elements. .section-step tr:first-child td { border-top-width: 1px; } .section-step  To left-align the table headings, use the CSS text-align property: text-align: left; Try it Yourself » HTML Table - Adding Border Spacing. Border spacing specifies the space between the cells. To set the border spacing for a table, use the CSS border-spacing property: border-spacing: 5px; Try it Yourself » Note: If the table has collapsed

Comments
  • this is not possible using CSS alone. What you could do is use a pseudo-element before your text to paint "4". if you want I could help you there.
  • sir, can you please help me
  • A solution below, hope it will help :)
  • @coder Does the answer below solve your problem?
  • thanks all..,,,,
  • I don't want to add another td sir, since it will make three columns