input-group不适合Chrome中的整个td内容

Question

我有以下网页：

HTML

<div class="center-both">
  <table>
    <tr>
      <td></td>
      <td>
        <img src="http://placehold.it/246x105">
      </td>
      <td></td>
    </tr>
    <tr>
      <td>
        <img src="http://placehold.it/128x128">
      </td>
      <td>
        <img src="http://placehold.it/640x390">
      </td>
      <td>
        <img src="http://placehold.it/128x128">
      </td>
    </tr>
    <tr>
      <td></td>
      <td>
        <div class="input-group">
          <input id="video-url" type="text" class="form-control" value="some_text">
          <div class="input-group-btn">
            <button id="copy-clipboard" type="button" class="btn btn-default">
              <i class="glyphicon glyphicon-copy"></i>
            </button>
          </div>
        </div>
      </td>
      <td></td>
    </tr>
  </table>
</div>

CSS

.center-both {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  -webkit-filter: blur(0);
}

.center-both img {
  display: block;
  margin: auto;
}

（JSFiddle link - https://jsfiddle.net/7rkrfj87/2/）

在Firefox中看起来如预期：

但在Chrome中input-group并不适合整个td：

为什么呢？我究竟做错了什么？如何强制它适合整个td？

Answer 1

您可以添加width: 100% duh！

.input-group {
    position: relative;
    display: table;
    border-collapse: separate;
    width: 100%;
}

我已在Chrome，Firefox中检查过它。

小提琴：Cython