修改

Question

这是一个场景：我想要像stackoverflow的评论。一个表包含3个<td>。一个用于投票，一个用于形状（投票和标记），一个用于评论文本。因此每个<td>都有自己的属性：

VN （投票编号）：如果编号不存在，那么width = 0;，此单元格的内容也应该是动态的。 （对于每位数字）
S （形状）：此单元格具有固定宽度，应注意其形状的visibility首先为hidden它们将在<tr>的悬停时显示，然后应始终指定此单元格的宽度。
CT （评论文字）：此单元格的宽度应为所有剩余宽度。它应该是word-wrap: break-word;。

结构：

+--+-+---------------------------------------------------+
|VN|S|CT                                                 |
+--+-+---------------------------------------------------+

例1：

+-+-+---------------------------------------------------+
|4|^|this comment is a test...!                         |
+-+-+---------------------------------------------------+

例2：

+-+------------------------------------------------------+
|^|this comment has not any voteup ...!                  |
+-+------------------------------------------------------+

示例3：

+---+-+---------------------------------------------------+
|123|^|the width of number of vote up cell should be      |
|   | |changeable and it should be noted that this cell is|
|   | |break-word.                                        |
+---+-+---------------------------------------------------+

这是我的尝试：但它无法正常工作。

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

正如我所说，我不知道为什么我的代码无法正常工作（应该注意我的容器是响应式的），我该如何解决？ Here是我所做的事情的缩影。

Answer 1

只有这个CSS你的表可以工作：

http://jsfiddle.net/1485tLf2/1

.container{
   width: 600px;
}

.S, .VN{
  width:  2%;
}

你不需要其他东西。如果没有指定宽度，表格会自动与内容匹配。为避免元素的移动而且所有注释都是对称的，只指定小列的宽度。如果投票列需要更多空间，则表会自动缩小以解决问题

修改

为了用你的评论完成代码，这里你是新的css和小提琴：

.container{
   width: 60%;
}
td{
   vertical-align: top;
    border: 1px solid;
}
td.CT {
    word-break: break-all;
}
.S, .VN{
   width: 2%;
}
td:empty {
    visibility:hidden;
}

看到它正常工作：https://jsfiddle.net/rubhxdm1/11/

Answer 2

这是一个你可以做的演示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

您的代码是正确的但是当用户尝试输入“sssssssssssssssssssssssssssssssss”时，这将被视为一个单词，因此您需要在CSS代码中添加连字符以识别长文本，因为您有{{ 1}}。 https://jsfiddle.net/q7o6m2ka/2/

word-break: break-word;

如何实现像stackoverflow这样的注释结构

结构：

3 个答案:

修改