CODEWITHSUNDEEP
htmlcsshtml-table
Ash
Ash

Reputation: 91

How to justify text in html table row

This is what I would like to achieve

  1. text in one line.
  2. no white screen.
  3. table is scrollable.
  4. stretch text to fill cell width

enter image description here

This is what I have now

  1. text in one line.
  2. no white screen.
  3. table is scrollable.

enter image description here

I am trying to achieve point 4

stretch text to fill cell width throughout the table.

This is what i've tried

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>

I have tried many different combinations and searched quite alot but could not find a solution.

Upvotes: 1

Views: 1515

Answers (1)

Johannes
Johannes

Reputation: 67748

You can use 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>

Upvotes: 5

Related Questions