Как выровнять текст в строке html таблицы - PullRequest
Новая
       10

Как выровнять текст в строке html таблицы

1 голос
/ 16 июня 2020

Это то, чего я хотел бы добиться

  1. текст в одной строке.
  2. без белого экрана.
  3. таблица прокручивается .
  4. растянуть текст для заполнения ширины ячейки

enter image description here

Это то, что у меня сейчас

  1. текст в одной строке.
  2. без белого экрана.
  3. таблица прокручивается.

enter image description here

Я пытаюсь достичь точки 4

растянуть текст, чтобы заполнить ширину ячейки по всей таблице.

Это то, что я пробовал 

h2 {
  font-size: 22px;
}

h3 {
  font-size: 20px;
}

h4,
p,
th,
td {
  font-size: 18px;
}

h1,
h2,
h3,
h4 {
  color: #008577;
  text-align: justify;
  margin: 10px;
}

table {
  margin: 5px
}

table,
th,
td {
  border-collapse: collapse;
}

th,
td {
  padding: 5px;
  text-align: right;
  font-family: hacen;
  border-bottom: 1px solid #ddd;
}

td {
  vertical-align: top;
}

table tr:nth-child(even) {
  background-color: #E9FCEC;
}

table tr:nth-child(odd) {
  background-color: #fff;
}

table th {
  color: white;
  background-color: #008577;
}

table td {
  text-align: justify;
  border: 1px solid #ddd;
  white-space: nowrap;
  vertical-align: middle;
  padding-right: 10px;
  padding-left: 10px;
}

div {
  overflow: scroll
}
<!DOCTYPE html >
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="initial-scale=1.0, user-scalable=yes, width=device-width" />
</head>

<body>

  <div style="overflow:scroll">
    <table id="t02">
      <tr>
        <th colspan="3" style="text-align:center">header</th>
      </tr>
      <tr>
        <td>1</td>
        <td>this is the fist half of the first line</td>
        <td>this is the second half of the first line</td>
      </tr>
      <tr>
        <td>2</td>
        <td>this is the fist half of the second line</td>
        <td>this is the second half of the second line</td>
      </tr>
      <tr>
        <td>3</td>
        <td>this is a short line</td>
        <td>this is a short line2</td>
      </tr>

    </table>
  </div>
  <br/>
</body>

</html>

Я пробовал много разных комбинаций и много искал, но не нашел решения.

1 Ответ

5 голосов
/ 16 июня 2020

Вы можете использовать text-align-last: justify;: 

h2 {
      font-size:22px;
    }
    h3 {
      font-size:20px;
    }
    h4, p, th, td  {
      font-size:18px;
    }
    
    h1, h2, h3, h4 {
        color:  #008577;
        text-align: justify;
        margin: 10px;
    }
    
    table {
       margin:5px
    }
    table, th, td {
      border-collapse: collapse;
    }
    
    th, td {
      padding: 5px;
      text-align: right;
      font-family: hacen;
      border-bottom: 1px solid #ddd;
    }
    
    td{
        vertical-align: top;
    }
    
    table tr:nth-child(even) {
      background-color: #E9FCEC;
    }
    
    table tr:nth-child(odd) {
      background-color: #fff;
    }
    
    table th {
      color: white;
      background-color: #008577;
    }
       
    table td {
       text-align: justify;
       text-align-last: justify;
       border: 1px solid #ddd;
       white-space: nowrap;
       vertical-align: middle;
       padding-right: 10px;
       padding-left: 10px;
        }

    div{
    overflow:scroll
    }
<!DOCTYPE html >
    <html>
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    	<meta name = "viewport" content = "initial-scale=1.0, user-scalable=yes, width=device-width" />
    </head>
    <body>
    
    <div style="overflow:scroll">
    	<table id="t02" >
    		<tr><th colspan="3" style="text-align:center">header</th></tr>
    		<tr><td>1</td><td>this is the fist half of the first line</td><td>this is the second half of the first line</td></tr>
    		<tr><td>2</td><td>this is the fist half of the second line</td><td>this is the second half of the second line</td></tr>
    		<tr><td>3</td><td>this is a short line</td><td>this is a short line2</td></tr>
    
    	</table>
    </div>
    <br/>
    </body>
    </html>
...