0

HTML で表形式のビューを作成しようとしています。テーブルが広すぎる場合、オーバーフローしたコンテンツは非表示になりますが、セルの幅は自動圧縮されません。一部のセルには、例のクラス「btn」の div のように、複数の項目が含まれています。

次のコードは Chrome で機能しますが、IE 8 では div を含むセルが 2 行に折り返されます。

<html>

<head>
  <style>
    #container {
      width: 100%;
      overflow: hidden;
      background-color: aqua;
    }
    
    .btn {
      width: 18px;
      height: 18px;
      background-color: red;
    }
    
    .tbl td {
      white-space: nowrap;
    }
    
    .tbl input {
      float: left;
    }
    
    .tbl div {
      float: left;
    }
  </style>
</head>

<body>
  <div id='container'>
    <table class='tbl'>
      <tr>
        <td>Item Name</td>
        <td><input style='width:100px' /></td>
        <td>Barcode</td>
        <td class='td2'><input style='width:80px' />
        </td>
        <td>Item code</td>
        <td><input style='width:50px' /></td>
      </tr>
      <tr>
        <td>Units</td>
        <td><input style='width:100px' /></td>
        <td>Item type</td>
        <td class='td2'><input style='width:80px' />
          <div class='btn'></div>
          <!-- this is causing a wrap to 2 lines -->
        </td>
        <td>ID</td>
        <td><input style='width:50px' /></td>
      </tr>
    </table>
  </div>
</body>

Chrome のスクリーンショット:

IE8 のスクリーンショット:

4

1 に答える 1

0

ADIVはブロック要素です。つまり、インライン要素ではありません。使用している CSS はワードラップを防止しますが、aDIVは単語ではないため、これは適用されません。DIV簡単な解決策は、 a : aに相当するインラインを使用することSPANです。

于 2012-07-27T14:21:02.133 に答える