Question

如何摆脱此代码的水平滚动条：codepen？我在Safari和Chrome中看到它，但不是Firefox。

我正在使用bootstrap，我大致有以下标记：

<div class="container">
  <div class="row">
    <div class="messages span6 offset1">
      <table class="table">
        <tbody>
          <tr>
            <td class=timestamp>[2:22 PM]</td>
            <td>echo|</td>
            <td>zot: Got a paste or gist of the code?</td>
          </tr>
          <!-- many more rows… -->
        </tbody>
      </table>
    </div>
  </div>
</div>

造型：

.messages {
  height: 200px;
  overflow: auto;
}
.messages .timestamp {
  min-width: 75px;
}

问题似乎是min-width约束，但我需要保持第一列不被包装。我还需要将消息的高度限制为200像素。我无法在overflow-x: hidden上设置.messages，因为它会切断内容。

Answer 1

这个怎么样： -

在最后一列使用word-break以避免它被切断。

word-break

Demo

.messages {
    height: 200px;
    overflow-y: auto;

}
.messages .timestamp {
    min-width: 75px;
}
.messages td:nth-child(3) {
    word-break:break-all; /* or use word-break:normal; if you don't want to get the word cut in between*/

}

这将根据可用宽度调整分词，而不隐藏内容。

Answer 2

使用以下css：

.messages {
  height: 200px;
  overflow-y: scroll;
  overflow-x: hidden;
}
.messages .timestamp {
  min-width: 75px;
}

Answer 3

您可以将.messages的height属性更改为＆＃34; auto＆＃34;而不是200px。

Answer 4

您可以通过将其span6更改为span7来增加表的宽度，或使用span类强制消息tds上的宽度与Twitter引导网格结构上下文一致。

我无法确切地告诉你为什么这是必要的;我实际上不太了解如何布置表格。但这似乎是您可以部署的解决方案。

Answer 5

一个完全不同的想法：你为什么要用表来做这个？你没有列出表格数据;你有一些语义相关的部分，但他们的关系并不是表格。鉴于此，你违反了一项基本规则：不要使用表格进行布局！在我看来，您可以使用div元素更明智地使用float或inline-block指定宽度。在这种情况下，您的标记看起来像这样：

<div class="container">
  <div class="row">
    <div class="messages span6 offset1">
      <div class="message">
        <span class="timestamp">[2:22 PM]</div>
        <span class="author">echo|</div>
        <span class="messageContent">zot: Got a paste or gist of the code?</div>
      </div>
      <!-- many more rows… -->
    </div>
  </div>
</div>

然后，你的CSS会非常简单，因为你已经为width定义了span6值（我查看了CodePen上的实际CSS）：

.message {
    display: block;
    clear: both;
}

.timestamp, .author, .messageContent {
    display: inline-block;
    vertical-align: top;
}

.timestamp, .author {
    width: 75px;
}

.messageContent {
    400px; /* You'd obviously need to tweak this down to account for any padding */
}

你不应该有令人讨厌的溢出问题，并且div应该以完全正常的方式填满他们的高度。你也可以约束它们。并且不再存在溢出问题。

（也许你就是你的所在地，因为它是引导默认的东西，在这种情况下：UGH。打破它，或做任何必要的事情来摆脱使用表格进行布局。它总是会更加痛苦而不是它的价值，并且启动它是无意义的。）

如何摆脱Chrome和Safari中的水平滚动条？

5 个答案:

Demo