<html>
<head>
<base href="https://bugs.webkit.org/" />
</head>
<body><table border="1" cellspacing="0" cellpadding="8">
<tr>
<th>Bug ID</th>
<td><a class="bz_bug_link
bz_status_NEW "
title="NEW - `width: 1%` on nested table cell causes its table to hog horizontal space"
href="https://bugs.webkit.org/show_bug.cgi?id=144696">144696</a>
</td>
</tr>
<tr>
<th>Summary</th>
<td>`width: 1%` on nested table cell causes its table to hog horizontal space
</td>
</tr>
<tr>
<th>Classification</th>
<td>Unclassified
</td>
</tr>
<tr>
<th>Product</th>
<td>WebKit
</td>
</tr>
<tr>
<th>Version</th>
<td>528+ (Nightly build)
</td>
</tr>
<tr>
<th>Hardware</th>
<td>Macintosh Intel
</td>
</tr>
<tr>
<th>OS</th>
<td>Mac OS X 10.10
</td>
</tr>
<tr>
<th>Status</th>
<td>NEW
</td>
</tr>
<tr>
<th>Severity</th>
<td>Normal
</td>
</tr>
<tr>
<th>Priority</th>
<td>P2
</td>
</tr>
<tr>
<th>Component</th>
<td>Tables
</td>
</tr>
<tr>
<th>Assignee</th>
<td>webkit-unassigned@lists.webkit.org
</td>
</tr>
<tr>
<th>Reporter</th>
<td>webkit@rebertia.com
</td>
</tr></table>
<p>
<div>
<pre>Created <span class=""><a href="attachment.cgi?id=252491" name="attach_252491" title="Screenshot of example demonstrating bug">attachment 252491</a> <a href="attachment.cgi?id=252491&action=edit" title="Screenshot of example demonstrating bug">[details]</a></span>
Screenshot of example demonstrating bug
Platform: OS X Yosemite
Safari Version: 8.0.5 (10600.5.17)
Summary:
Adding a `width: 1%;` style to a nested table cell causes its sibling cell to hog horizontal space.
Firefox and IE11/Edge don't suffer from this problem.
To reproduce:
1. Open <a href="http://jsfiddle.net/eejzdf4a/">http://jsfiddle.net/eejzdf4a/</a> in Safari.
2. Look at the Result pane in the lower-right of the window.
Expected results:
In the portion of the example titled "Wonky", the green and yellow cells
should each take up a somewhat equal amount of horizontal space.
The green and yellow cells should have the same boundaries that they do
in the portion of the example titled '"Fixed" by removing the one-percent class'.
(See the Firefox screenshot. IE11/Edge gives the same result as Firefox.)
Actual results:
In the portion of the example titled "Wonky", the green cell takes up a
very small amount of horizontal space, whereas the yellow cell
takes up almost all of the horizontal space.
The green and yellow cells have different boundaries than they do
in the portion of the example titled '"Fixed" by removing the one-percent class'.
(See the Safari screenshot.)
Bootstrap bug report:
<a href="https://github.com/twbs/bootstrap/issues/16372">https://github.com/twbs/bootstrap/issues/16372</a>
Original corresponding Chrome bug report:
<a href="https://code.google.com/p/chromium/issues/detail?id=427994">https://code.google.com/p/chromium/issues/detail?id=427994</a>
Other, more complex example of the bug, that uses Bootstrap:
<a href="http://jsfiddle.net/rq3shh3t/2/">http://jsfiddle.net/rq3shh3t/2/</a></pre>
</div>
</p>
<hr>
<span>You are receiving this mail because:</span>
<ul>
<li>You are the assignee for the bug.</li>
</ul>
</body>
</html>