22

以下は、通常動的に生成されるコンテンツです。ページのメイン部分には<div class="span6">. この div のテーブルが div 自体よりも広くなることがあります (css を確認したところ、幅は 100% に設定されています)。テーブルに短いテキストを入れるだけの場合、または div を広くすれば、すべて問題ありません。質問は次のとおりです。

  1. テーブルの幅が よりも広くなるのはなぜdiv class=spanXですか? ブロック要素はその親の幅を取るといつも思っていましたか?
  2. tdそれぞれのテーブルの文字/スペースの数は異なる場合があります。テーブルが div よりも広くならないようにするにはどうすればよいですか? もちろん、文字数を動的にチェックすることはできますtsが、この情報をどうすればよいでしょうか?

http://jsfiddle.net/vNnc6/

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>MySite</title>
<meta name="author" content="me"/>

<link href="static/css/bootstrap.css" rel="stylesheet">
<link href="static/css/bootstrap-responsive.css" rel="stylesheet">
<link href="static/profhase.css" rel="stylesheet">

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="static/bootstrap/js/bootstrap.js"></script>


<body>
  <div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
      <div class="container">
    <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
    </a>

    <ul class="nav">
      <li><a class="brand" href="profhase">MyBrand</a></li>
      <li><a href="#">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Blog</a></li>
    </ul>

      <div class="nav pull-right collapse nav-collapse" style="hight: 0px">
        <ul class="nav collapse nav-collapse">
          <li><p class="navbar-text">Apps: </p></li>
          <li><a href="firstapp/">AppOne <i class="icon-lock"></i></a></li>
        </ul>
      </div>
      </div>
    </div>
  </div>

  <div class="container-fluid">
    <div class="row">
      <div class="span2">
    <p>
      My Wonderful sidebar
    </p>
      </div>
      <div class="span6" style="background:red;">
    <table class="table">
      <tbody>
        <tr>
          <th>Header1</th>
          <th>Header2</th>
          <th>Header3</th>
          <th>Header4</th>
          <th>Header5</th>
          <th>Header6</th>
        </tr>

        <tr>
          <td>My first Test</td>
          <td>My second Test</td>
          <td>My third Test</td>
          <td>My fifth Test</td>
          <td>My lalalalalong long lelong long long Test</td>

          <td>
        <div class="btn-group">
          <a class="btn dropdown-toggle" data-toggle="dropdown">
            Dropdown Choices <span class="caret"></span>
          </a>

          <ul class="dropdown-menu">
            <li><a id=1>First wonderful choice</a></li>
          </ul>

        </div>
          </td>
        </tr>
      </tbody>
    </table>
      </div>
    </div>
  </div>

</body>
4

2 に答える 2

74

FelipeAls による回答のおかげで、このコードはそれを行いました:

table {
    table-layout: fixed;
    word-wrap: break-word;
}

別の可能性は、ワードラップを使用せず、次のようなものを使用することです...

http://jsfiddle.net/zzmfA/

于 2013-05-26T12:02:35.673 に答える
6

  1. span6の親が表示されてtableいますが、span6フローティングしていることに気付きました。float を削除してspan*をdisplay: table-cell動作させる: fiddle注: TB
    よりも適切なクラス(既に.span*display: table-cell

  2. 他の解決策ですが、おそらくあなたが達成したいことではありません：「フローティング要素とoverflow: hidden;並んでいる要素 」のテクニック：ワーキングフィドル

于 2013-05-25T20:06:09.550 に答える