Elad Benda Elad Benda - 3 months ago 7
CSS Question

how to make a table fit into a certain size

I have this table which comes out bigger than it's background box.

enter image description here

How can i make the table fit this bg box?

enter image description here




jsFiddle




CODE SNIPPET:





<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)




Answer
.primary-article {
   word-break: break-all; 
}

will solve your problem. It's a general problem with CSS and will happen when a word is too long (meaning without a space between). Then it will break out of it's container. To avoid this you can force breaking of words or you can set the container to overflow:hidden; to cut the overflowing text.

Fiddle: https://jsfiddle.net/77w36oqd/

EDIT: Actually in your case not only the content of the <td> breaks out, but also other elements like <h3> in the .primary-article container. So you can force word breaking for the whole container.

Comments