如何对齐html表格行中的文本

Question

如何对齐html表格行中的文本

Ash*_*Ash 1 html css html-table

这就是我想要实现的

一行中的文本。
没有白屏。
表格是可滚动的。
拉伸文本以填充单元格宽度

这就是我现在所拥有的

一行中的文本。
没有白屏。
表格是可滚动的。

我正在努力实现第 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
}

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

我尝试了许多不同的组合并搜索了很多但找不到解决方案。

Answer 1

Joh*_*nes 5

您可以使用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
    }

Run Code Online (Sandbox Code Playgroud)

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	6 年前
查看次数：	144 次
最近记录：	6 年前