html - 输入组不适合 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 链接——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 中查看过了。

fiddle :https://jsfiddle.net/fLs7t1v8/