How to implement a comment structure like stackoverflow

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.

So, basically you want to hide the "VN" cell when it has no content. Why? And have you considered the effect of a list of items? It would mean elements with an empty "VN" cell have the other elements further to the left. — Burki
– Burki, Commented Aug 13, 2015 at 7:04

Brian Nezhad · Accepted Answer · 2015-08-13 18:34:21Z

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%;
}

edited Aug 13, 2015 at 18:34

answered Aug 13, 2015 at 18:22

Brian Nezhad

6,29610 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shafizadeh Over a year ago

as I said in the previous comments, I don't want to use of word-break. because it breaks the words of the middle.

Brian Nezhad Over a year ago

it work now, even if you remove the word-break, but you need to Hyphenate

Shafizadeh Over a year ago

very very good the answer of my question is just one word: Hyphenate :-) +1 vote up for you!!!

Manoj Dhiman · Accepted Answer · 2015-08-13 07:21:02Z

1

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>

answered Aug 13, 2015 at 7:21

Manoj Dhiman

5,1616 gold badges32 silver badges71 bronze badges

6 Comments

Marcos Pérez Gude Over a year ago

This don't works as OP needs, but I think that is sleeping while he writing because it has no sense... jsfiddle.net/rubhxdm1/12

Marcos Pérez Gude Over a year ago

There is a lot of space. However, it's fine, if you need it use it. jsfiddle.net/rubhxdm1/15 See it working with your same problems. :P

Manoj Dhiman Over a year ago

jsfiddle.net/rubhxdm1/14 fullfill the the three conditions as OP mentioned .

Marcos Pérez Gude Over a year ago

@ManojDhiman are you serious? A new table every comment? This code is a really weird code to show 3 cells... It is dirty, but op want it? I think this behaviour is better with divs, I tell him in my comments.

Manoj Dhiman Over a year ago

I just updated the code Op wants . why you are getting jealous ??

|

Marcos Pérez Gude · Accepted Answer · 2015-08-13 07:28:05Z

1

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/

edited Aug 13, 2015 at 7:28

answered Aug 13, 2015 at 7:08

Marcos Pérez Gude

22.2k4 gold badges41 silver badges70 bronze badges

18 Comments

Shafizadeh Over a year ago

please check out my update, container is not 600px.

Marcos Pérez Gude Over a year ago

It doesn't matter. Put my code in your project and it works. See your fiddle edited by me: jsfiddle.net/rubhxdm1/8

Shafizadeh Over a year ago

yes, I think it works :-) ! thanks, just please put this in your code: word-wrap: break-word;. +1 vote up for you.

Shafizadeh Over a year ago

also when I remove vote number, It width is fixed !! I want if vote number was empty, then its width = 0;

Marcos Pérez Gude Over a year ago

The problem is when the text is a long word without spaces. However, you can change word break instead of word wrap in the same css class

|

Collectives™ on Stack Overflow

How to implement a comment structure like stackoverflow

The structure:

3 Answers 3

3 Comments

6 Comments

EDIT

18 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

The structure:

3 Answers 3

3 Comments

6 Comments

EDIT

18 Comments

Your Answer

Sign up or log in

Post as a guest

Related