Html 防止引导表比跨度更宽

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/16752649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 08:45:02  来源:igfitidea点击:

prevent bootstrap table being wider than span

htmlcsstwitter-bootstrap

提问by ProfHase85

Below is a content which is usually generated dynamically. In the main part of the page there is a <div class="span6">. Sometimes the Table in this div becomes wider than the div itself (I ve checked the css, the width is set to 100%) . If I only put short text into the table, or if i make the div wider everything is fine. The Questions are:

以下是通常动态生成的内容。在页面的主要部分有一个<div class="span6">. 有时这个 div 中的 Table 变得比 div 本身更宽(我检查了 css,宽度设置为 100%)。如果我只将短文本放入表格中,或者如果我使 div 更宽,一切都很好。问题是:

  1. Why can a table become wider than div class=spanX? I always thought, a block element takes the width of its parent?
  2. The number of characters/spaces in the respective tdof the table can vary. How do I prevent the table from growing wider than the div? Of course I can dynamically check for the number of characters in a tsbut what do i do with this information?
  1. 为什么一张桌子可以变得比 宽div class=spanX?我一直在想,块元素会占用其父元素的宽度吗?
  2. 相应td表格中的字符/空格数可能会有所不同。如何防止表格变得比 div 更宽?当然,我可以动态检查 a 中的字符数,ts但我如何处理这些信息?

http://jsfiddle.net/vNnc6/

http://jsfiddle.net/vNnc6/

The HTML:

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>

回答by ProfHase85

Thanks to the answer by FelipeAls this code did it:

感谢 FelipeAls 的回答,这段代码做到了:

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

Another possibility is not to use word wrap but having something like ...

另一种可能性是不使用自动换行,而是使用类似...

http://jsfiddle.net/zzmfA/

http://jsfiddle.net/zzmfA/

回答by FelipeAls

  1. I noticed the parent of span6is displayed as tablebut span6is floating. Removing the float and setting the span*to display: table-cellworks: fiddle
    Note: there may have a more suitable class than span*in TB, a class which already has display: table-cell.

  2. Other solution, but probably not what you want to achieve: the technique of "an element with overflow: hidden;alongside a floating element": Working fiddle
    The explanation of this magic is named block formatting context (T. J. Koblentz' blog)- question on SO

  1. 我注意到的父级span6显示为tablespan6浮动。删除浮点数并将其设置span*display: table-cell有效:fiddle
    注意:可能有一个比span*TB更合适的类,一个已经有display: table-cell.

  2. 其他解决方案,但可能不是您想要实现的:“带有overflow: hidden;浮动元素的元素”的技术工作小提琴
    这种魔法的解释被称为块格式上下文(TJ Koblentz 的博客)-关于 SO 的问题