zapobiega ustawieniu tabeli ładowania początkowego na szerszy niż zakres

Poniżej znajduje się zawartość generowana zwykle dynamicznie. W głównej części strony znajduje się <div class="span6">. Czasami tabela w tym div staje się szersza niż sam div (sprawdziłem css, szerokość jest ustawiona na 100%). Jeśli umieściłem tylko krótki tekst na stole lub jeśli sprawię, że div będzie szerszy, wszystko będzie dobrze. pytania są:zapobiega ustawieniu tabeli ładowania początkowego na szerszy niż zakres

Dlaczego stół stają się szersze niż div class=spanX? Zawsze myślałem, że element blokowy przyjmuje szerokość swojego rodzica?
Liczba znaków/spacji w odpowiednich td tabeli może być różna. Jak zapobiec rozszerzaniu się tabeli w stosunku do div? Oczywiście mogę dynamicznie sprawdzać liczbę znaków w ts, ale co mam zrobić z tymi informacjami?

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>

Źródło

2013-05-25 ProfHase85

Dzięki odpowiedź FelipeAls ten kod to zrobił:

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

Inną możliwością jest, aby nie używać zawijany ale o coś takiego ...

http://jsfiddle.net/zzmfA/

Źródło

2013-05-26 12:02:35 ProfHase85

zauważyłem rodzicem span6 jest wyświetlany jako table ale span6 jest zmienna. Demontaż pływaka i ustawiania span* do display: table-cell prace: fiddle
Uwaga: nie może mieć więcej niż odpowiednią klasę span* w TB, klasę, która ma już display: table-cell.
Inne rozwiązanie, ale chyba nie to, co chcesz osiągnąć: technikę „elementu z overflow: hidden; obok elementu pływającego”: Working fiddle
Wyjaśnienie tej magii nazwie block formatting context (T. J. Koblentz' blog) - question on SO

Źródło

2013-05-25 20:06:09 FelipeAls

zapobiega ustawieniu tabeli ładowania początkowego na szerszy niż zakres

Odpowiedz

Powiązane problemy