I have a simple problem, but I could not figure out the solution for it. I have this element
<tr className="list-group-item list-item row">
<td className="col">Phone number :</td>
<td className="col">{this.state.phone_number}{""}</td>
</tr>
I expect it to display one line row like this
Phone number : +1 773-381-0000
however it displays this
+1
Phone number : 773-
381-
0000
You can try the nowrap
attribute to display properly.
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_td_nowrap
<tr className="list-group-item list-item row">
<td className="col">Phone number :</td>
<td style="white-space: nowrap;" className="col">{this.state.phone_number}{""}</td>
</tr>
Your problem is that there is not enough space in the table and the text wraps.
The row
and col
bootstrap classes don't work well with tables. Check responsive table here https://mdbootstrap.com/docs/jquery/tables/responsive/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.