CODEWITHSUNDEEP
htmlcsstablerow
harv3
harv3

Reputation: 303

show text in multiple lines in HTML table cell

I have this date format 2019-09-13 14:36:06 which I want to insert in table cell such that date comes in first line and time comes in second line like this 

2019-09-13
14:36:06

I tried the following css on table cell for this purpose

td{
    white-space:pre;
}

But what I am getting is this

2019-
09-13 
14:36:06

Upvotes: 1

Views: 8792

Answers (2)

Baro
Baro

Reputation: 5520

Probably the result you get is due to the actual width that is within your cell (thus its size).

This is the example:

table { border:solid 1px; }
table tr { border:solid 1px; }
table tr td { border:solid 1px; }
td {
  max-width: 55px;
}
<table>
  <tr>
    <td>2019-09-13 14:36:06</td>    
  </tr>
</table>

If you want try with white-space:pre; you need to have the date in your HTML already formatted in two lines, and the formatting will be respected.

table { border:solid 1px; }
table tr { border:solid 1px; }
table tr td { border:solid 1px; }
td {
  
  text-align:center;
  white-space: pre;
}
<table>
  <tr>
    <td>2019-09-13 14:36:06</td>    
  </tr>
  <tr>
    <td>
2019-09-13
14:36:06
    </td>    
  </tr>
</table>

To my knowledge, however, there are no other pure CSS solutions (perhaps as a very clever hack). The alternative is to use Javascript but it does not seem to be included in your request.

Upvotes: 2

Manikandan2811
Manikandan2811

Reputation: 841

I think it has two way to implement ur question..

1.Add this html code..

<table>
    <tbody>
        <td><span>2019-09-13</span> <span>14:36:06</span></td>
    </tbody>
</table>

css

td span {
    display: block;
}

2.If its possible, then plz reduce the width of the td..

Upvotes: 0

Related Questions