我有一张比背景框大的 table 。
我怎样才能让 table 适合这个背景框？
代码片段:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<body style="">
<div class="content-background" style="background-color: #4285f4; height: 398px; position: absolute; width: 100%; top: 60px; z-index: -1;"></div>
<div class="appbar-container" style="background-color: #4285f4; color: #fff; height: auto; width: 100%;">
<div class="appbar-top" style="padding-left: 80px; overflow: hidden;"><span class="" style="line-height: 64px; font-size: 20px;" itemprop="title">Failures in 1.0.705</span>
<p style="font-weight: 300; display: inline-block; float: right; margin: 10px; padding-right: 24px;">save date: 06:44:41 03-Sep-02016</p>
</div>
</div><span class="primary-container"><div class="page-width-container" style="float: left; margin-left: 128px; width: 832px; background-color: #fff; box-shadow: 0 2px 5px 0 rgba(0,0,0,.26); padding: 64px; position: relative;"><span class="primary-article" role="main"><span><table class="table table-bordered table-striped" border="1" style="width:100%"><th style="width:70%">Error</th><th>Percent (% from total)</th><tr><td rowspan="2">com.github.rholder.retry.RetryException: Retrying failed to complete successfully after 3 attempts. previous error was: java.lang.RuntimeException: java.lang.Exception: Failed to handle request </td><td>59.35% ( 3.65% )</td></tr><tr></tr><tr><td rowspan="2">com.github.rholder.retry.RetryException: Retrying failed to complete successfully after 3 attempts. previous error was: linqmap.p2p.NoAvailableServerException: Could not find server to send to for Routing.[_all_] (resgistry: GeoRegistryClientConfig) stack:linqmap.p2p.NoAvailableServerException: Could not find server to send to for Routing.[_all_] (resgistry: GeoRegistryClientConfig)
at linqmap.p2p.impl.ClientP2PRegistryAccess.getServers(ClientP2PRegistryAccess.java:409)最佳答案
.primary-article {
word-break: break-all;
}
将解决您的问题。 这是 CSS 的一个普遍问题，当单词太长(意思是中间没有空格)时会发生。然后它会破壳而出。为避免这种情况，您可以强制中断单词或将容器设置为溢出:隐藏；剪切溢出的文本。
fiddle :https://jsfiddle.net/77w36oqd/
编辑:实际上在您的情况下，不仅是 <td> 的内容爆发，还有其他元素，如 <h3>在 .primary-article 容器中。因此，您可以对整个容器强制断字。
关于html - 如何使 table 适合特定尺寸，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39310541/