0

このコードの水平スクロールバーを取り除くにはどうすればよいですか: codepen ? Safari と Chrome では表示されますが、Firefox では表示されません。

私はブートストラップを使用しています。おおよそ次のマークアップがあります。

<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途切れるので起動できません。

4

5 に答える 5

0

完全に別の考え: なぜこれを行うためにテーブルを使用しているのですか? 表形式のデータをレイアウトしていません。意味的に関連する部分がいくつかありますが、それらの関係は表形式ではありません。それを考えると、基本的なルールの 1 つに違反しています: レイアウトにテーブルを使用しないでください! 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>

width次に、値を定義したので、CSS はかなり単純になります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。それを壊すか、レイアウトにテーブルを使用することから逃れるために必要なことは何でもしてください。それは常に、価値があるよりも常に苦痛です、そして起動するのは意味不明です。)

于 2013-05-11T18:13:31.890 に答える
0

span6 を span7 に変更してテーブルの幅を増やすか、span クラスを使用して、Twitter ブートストラップ グリッド構造コンテキストと一致するメッセージ tds の幅を強制することができます。

これが必要な理由を正確に説明できませんでした。実際、テーブルがどのようにレイアウトされるかについてはあまり知りません。しかし、これは展開できるソリューションのようです。

于 2013-05-11T17:25:53.617 に答える