Issue
Here I have a table in which I want to break a long word into multiple lines by changing its cell width (e.g. as 20px), like below:
<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
<tbody>
<tr >
<td>
123
</td>
<td>123</td>
<td style="width: 20px;">
canyouhelpmebreakintolineswith20pxwidth?</td>
</tr>
<tr>
<td>
abc
</td>
<td>
def
</td>
<td style="width: 20px;">
placeholder
</td>
</tr>
</tbody>
</table>
CSS:
table {border-collapse:collapse; table-layout:fixed;}
table td {
border-width: 1px;
border:solid 1px;
word-wrap:break-word;}
I even made the width of the whole columns as 20 px, and I used table-layout as fixed and word-wrap as break-word, but the cell width still refused to change. Can you please point me where I am wrong?
Below is the JS Fiddle link:
https://jsfiddle.net/flyingbee2012/nxzjof9d/21/
Solution
I think you're trying to implement the solution described here: force line break in html table cell If you want to automatically wrap a word then you have to add the width of the table itself. In your case set the width of the table to 100% to create equal sized columns that automatically wrap. I prepared a small example with 80% width and the 20px column here.
<html>
<body>
<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;">
<tbody>
<tr >
<td>
123
</td>
<td>123</td>
<td style="width: 20px">
canyouhelpmebreakintolineswith20pxwidth?</td>
</tr>
<tr>
<td>
abc
</td>
<td>
def
</td>
<td>
</td>
</tr>
</tbody>
</table>
</body>
</html>
And the css:
table {border-collapse:collapse; table-layout:fixed; width: 80%}
table td {
border-width: 1px;
border:solid 1px;
word-wrap:break-word;}
Answered By - Marius Klein Answer Checked By - Robin (PHPFixing Admin)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.