How to implement a comment structure like stackoverflow - html

Question

Here is the scenario: I want exactly something like stackoverflow's comments. A table contained 3 <td>. one for the number of votes, one for shapes (vote up and flag), one for text of comment. So each <td> has its own property:
VN (Votes Number): If the number not exist, then width = 0;, also the with of this cell should be dynamic. (for every-digit number)
S (Shapes): This cell has fixed width, it should be noted that the visibility of its shapes is hidden in first and they will be show on hover of <tr>, then the width of this cell always should be assigned.
CT (Comment Text): The width of this cell should be all the remaining width. It should be word-wrap: break-word;.
The structure:
+--+-+---------------------------------------------------+
|VN|S|CT |
+--+-+---------------------------------------------------+
example1:
+-+-+---------------------------------------------------+
|4|^|this comment is a test...! |
+-+-+---------------------------------------------------+
example2:
+-+------------------------------------------------------+
|^|this comment has not any voteup ...! |
+-+------------------------------------------------------+
example3:
+---+-+---------------------------------------------------+
|123|^|the width of number of vote up cell should be |
| | |changeable and it should be noted that this cell is|
| | |break-word. |
+---+-+---------------------------------------------------+
Here is my try: But it does not work correctly.
HTML:
<div class="container">
<table>
<tr>
<td class="VN">4</td>
<td class="S">^</td>
<td class="CT">this is a sample.</td>
</tr>
</table>
</div>
CSS:
.container{
width: 60%;
}
table{
table-layout: fixed;
width: 100%;
}
td{
word-wrap: break-word;
vertical-align: top;
}
.VN{
width: auto;
}
.S{
width: 10px;
}
.CT{
width: 98%;
}
As I said, I don't know why my code does not work correctly (It should be noted my container is responsive), How can I fix it ?
Here is a fiddle of what I did.

Answer 1

Your code is correct but when user try to type "sssssssssssssssssssssssssssss" this will count as one word, so you need to add Hyphenation to your CSS code for recognition of long text since you have word-break: break-word;. https://jsfiddle.net/q7o6m2ka/2/
.CT {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
padding: 5px;
width: 98%;
}

Answer 2

here is a demo you can do it jsfiddle
<div class="container">
<table>
<tr>
<td>
<table>
<tbody>
<tr>
<td><span>1</span></td>
<td><a>^</a>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div>
<span>text of the comment</span>
</div>
</td>
</tr>
</table>
</div>

Answer 3

With only this CSS your table works:
http://jsfiddle.net/1485tLf2/1
.container{
width: 600px;
}
.S, .VN{
width: 2%;
}
You don't need the other things. Tables fits automatically with content if you don't specifiy width. To avoid movements of elements and all comments will be symetric, only specify the small columns width. If the votes column needs more space, the table shrinks automatically to fix it without problems
EDIT
In order to complete the code with your comments, here you are new css and fiddle:
.container{
width: 60%;
}
td{
vertical-align: top;
border: 1px solid;
}
td.CT {
word-break: break-all;
}
.S, .VN{
width: 2%;
}
td:empty {
visibility:hidden;
}
See it working: https://jsfiddle.net/rubhxdm1/11/