समायोजित रिक्त स्थान के बीच पाठ या शब्दों में html

Question 1

मैं एक समस्या है कैसे समायोजित रिक्त स्थान के बीच पाठ या शब्दों में html. मैं चाहता हूँ कि मेरे परिणाम 2 "पेट के" संरेखण समायोजित कर सकते हैं एक ही लाइन है ।

नीचे है मेरे नमूना कोड:

<tr><td style="font-size:11px;">Name :</td></tr><br>
<tr><td style="font-size:11px;">Date &nbsp;<span style="word-spacing:80px;">:</span></td></tr>

अब मेरे परिणाम संरेखण नहीं किया जा सकता उसी तरह:

मैं चाहता हूँ की उम्मीद है और परिणाम एक ही है नीचे की तरह:

मैं का उपयोग करने की कोशिश <p> को बदलने के लिए <span> संरेखण समायोजित, लेकिन "पेट" नीचे टूट जाएगा. आशा है कि किसी को कर सकते हैं पर मुझे गाइड करने के लिए कैसे इस समस्या को हल. धन्यवाद.

Question 2

के रूप में बृहदान्त्र के लिए है दृश्य जुदाई के बजाय किसी भी अर्थ मैं पर विचार करेंगे डालने में यह एक छद्म तत्व में वास्तव में के बजाय HTML.

यह टुकड़ा डालता है बृहदान्त्र में बस से पहले निम्न टीडी सुनिश्चित करता है जो colons गठबंधन कर रहे हैं ।

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Question 3

मैं एक ऐसी ही समस्या थी और केवल "hacky" जिस तरह से मैंने पाया है इस:
"अपने पाठ और विभाजक (: इस मामले में) में एक आवरण की तरह ( <div>) और उन्हें पंक्ति.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

इसके अलावा, आप की जरूरत नहीं है <br> अपने बीच तालिका पंक्तियों (<tr>एस).

Question 4

मैं यहाँ अद्यतन किया है अपने नमूना कोड डाल दिया : दूसरे टीडी

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

Question 5

सबसे आसान तरीका है कि पूरा करने के लिए है डाल करने के लिए बृहदान्त्र की शुरुआत में 'पाठ', के बजाय के अंत में 'शीर्षक'.

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

अगर आप की जरूरत न आना करने के लिए जब यह 'पाठ' खाली है, आप कर सकते हैं उत्पादन बृहदान्त्र के रूप में एक td::before सीएसएस का उपयोग कर.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

Question 6

अगर इसके बारे में एक भी शब्द के द्वारा पीछा किया :, text-align-last:justify; काम कर सकते हैं

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

A Haworth · Answer 1 · 2021-11-24T06:22:45

के रूप में बृहदान्त्र के लिए है दृश्य जुदाई के बजाय किसी भी अर्थ मैं पर विचार करेंगे डालने में यह एक छद्म तत्व में वास्तव में के बजाय HTML.

यह टुकड़ा डालता है बृहदान्त्र में बस से पहले निम्न टीडी सुनिश्चित करता है जो colons गठबंधन कर रहे हैं ।

td:nth-child(2)::before {
  content: ':';
}

<table>
  <tr>
    <td style="font-size:11px;">Name </td>
    <td></td>
  </tr><br>
  <tr>
    <td style="font-size:11px;">Date</td>
    <td></td>
  </tr>
</table>

Shahriar · Answer 2 · 2021-11-24T08:05:14

मैं एक ऐसी ही समस्या थी और केवल "hacky" जिस तरह से मैंने पाया है इस:
"अपने पाठ और विभाजक (: इस मामले में) में एक आवरण की तरह ( <div>) और उन्हें पंक्ति.

.cell {
  display: flex;
  justify-content: space-between;
  width: 50px; /* just to see. you can use another value depending on your table styles */
}

<tr>
  <td style="font-size:11px;">
    <div class="cell">Name <span>:</span></div>
  </td>
</tr>
<tr>
  <td style="font-size:11px;">
    <div class="cell">Date <span>:</span></div>
  </td>
</tr>

इसके अलावा, आप की जरूरत नहीं है <br> अपने बीच तालिका पंक्तियों (<tr>एस).

Janki Gandhi · Answer 3 · 2021-11-24T05:07:41

मैं यहाँ अद्यतन किया है अपने नमूना कोड डाल दिया : दूसरे टीडी

<body>
    <table>
      <tr>
        <td>Full Name</td>
        <td>: Abc def</td>
      </tr>
      <tr>
        <td>Date</td>
        <td>: 24-11-2021</td>
      </tr>
    </table>
  </body>

LSE · Answer 4 · 2021-11-24T04:57:36

सबसे आसान तरीका है कि पूरा करने के लिए है डाल करने के लिए बृहदान्त्र की शुरुआत में 'पाठ', के बजाय के अंत में 'शीर्षक'.

/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td> : John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td> : Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td> : Data</td>
  </tr>
</table>

अगर आप की जरूरत न आना करने के लिए जब यह 'पाठ' खाली है, आप कर सकते हैं उत्पादन बृहदान्त्र के रूप में एक td::before सीएसएस का उपयोग कर.

/* This is relevant */

td:not(:empty)::before {
  content: " : ";
}


/* Not relevant */

th {
  font-weight: normal;
  text-align: left;
}

<table>
  <tr>
    <th>Name</th>
    <td>John Doe</td>
  </tr>
  <tr>
    <th>Date</th>
    <td>Nov. 24, 2021</td>
  </tr>
  <tr>
    <th>Very long title</th>
    <td></td>
  </tr>
</table>

G-Cyrillus · Answer 5 · 2021-11-24T08:11:27

अगर इसके बारे में एक भी शब्द के द्वारा पीछा किया :, text-align-last:justify; काम कर सकते हैं

td.adjust {
  text-align-last: justify;
  padding-inline-end:0.25rem;
}

<table>
  <tr>
    <td class="adjust">Name :</td>
    <td>Name </td>
  </tr><br>
  <tr>
    <td class="adjust">Date :</td>
    <td>Today</td>
  </tr>
</table>

समायोजित रिक्त स्थान के बीच पाठ या शब्दों में html

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में