Разрыв строки в таблице HTML - PullRequest
Новая
       38

Разрыв строки в таблице HTML

0 голосов
/ 13 июня 2018

У меня есть скрипка , которую я воспроизвел из определенного дизайна.

Раздел скриншота, который я прикрепил ниже в описании проблемы.

Постановка задачи:

Мне интересно, какие изменения я должен внести в скрипту, чтобы я мог дать разрыв строки между следующими строками какпоказано на скриншоте , который также присутствует в скрипте 1014 *.

enter image description here

Фрагменты HTML-кодов, которые я использовал в скрипте для приведенных выше строк: 

  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>

Ответы [ 2 ]

0 голосов
/ 14 июня 2018

Я знаю, что на этот вопрос был дан ответ, но есть альтернативный способ, к которому можно обратиться.

Примечание: я добавил в ваш код, чтобы показать пример до и после.

Вот скрипка того же кода, если вам это нужно. 

<html>
<body>


<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<!-- new way -->
<table style="width:100%;">
 <tbody> 
  <tr>
    <td>
        <table style="width:100%;">
         <tbody> 
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
           
          <tr>
           <td width="50%" align="right" style="font-family:Arial; font-size:12px;color:#000000;;padding:0px 20px;">type </td>
           <td width="50%" style="font-family:Arial; font-size:12px;color:#000000;text-align:left;padding:0px 10px;">availability check request</td>
	        </tr>
         </tbody>
        </table>
    </td>
	  </tr>
  </tbody>
</table>
<!-- new way -->

<table style="width:100%;display: flex;
  justify-content: center;">
  
 <tbody style="font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">type:</td>
	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">what</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">how many</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;word-wrap: break-word;
    width: 300px;" >March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">who:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class="steps" style="text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

Приветствия

0 голосов
/ 13 июня 2018

Вот что я сделал:

Добавьте line-break класс к указанному <td>

Вы можете использовать word-wrap: break-word; для многострочного текста в div.word-wrap работает на основе width деления. 

.line-break {
  word-wrap: break-word;
  width: 300px;
}
<html>
<body>


<p style="font-size:20px;margin-left:22%;color:#55BEC7;"> hi XYZ, </p>

<table style="width:100%;display: flex;
  justify-content: center;">
  
 <tbody style="font-size:20px;padding-left: 15%;"> 
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">type:</td>
	<td style="padding-bottom: 3%;padding-left: 10%;">availability check request</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">estimated total:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">$250.00</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">what</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">chainsaw</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">how many</td>
    <td style="padding-bottom: 3%;padding-left: 10%;">2</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">when:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;" class="line-break">March 28/18 @ 7:00pm to March 30/18 @ 7:00pm</td>
  </tr>
  <tr>
    <td style="padding-bottom: 3%;text-align:right;">who:</td>
    <td style="padding-bottom: 3%;padding-left: 10%;color:#FF8D58;">John s</td>
  </tr>
  </tbody>
</table>



<h2 style="text-align:center;color:#484848;margin-top:2.5%;margin-bottom:5%;">steps to earn your money:</h2>
<div class="steps" style="text-align: left;
    margin-left: auto;
    width: 50%;
    padding-right: 0%;
    margin-right: auto;color:#484848;font-size:20px;">
<p>1. click here to open the ABC app to the posting requests page </p>
<p>2. click on availability check request</p>
<p>3. say yes, its availabile ot suggest another date it is</p>
<p>4. wait the 1 or 24 hour confirmation good</p>
<p>5. three days after the booking ends money will be send to your account</p>
</div>
</body>
</html>

Вот JSFiddle

...