7

table-layout: fixedモバイル アプリに CSS プロパティを使用しています。（完全な理由は思い出せませんが、ある種のワードラップを有効にすることに関係していたと思います）...

2 列のテーブルの 2 つの列のいずれかのサイズを変更する必要があるという問題に遭遇しました。大したことではありませんが、通常は次のようにします。

<table>
  <tbody>        
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

それはうまくいきます。

ただし、この列の前に両方の列にまたがる行を作成する必要がある場合:

<table>
  <tbody>   
    <tr>
      <td colspan="2">hello world</th>
    </tr>     
    <tr>
      <th width="20%">hello world</th>
      <td>hello world</td>
    </tr>
  </tbody>
</table>

少なくとも Chrome では、2 つの列が 50% の幅にスナップされます。ここに jsbin サンプルがあります。

http://jsbin.com/ejovut/3

これは正常な動作ですか？クロムのバグ？この問題を回避する方法はありますか?

4

2 に答える 2

12

これはバグではありません。 table-layout:fixedつまり、最初の行と列の仕様のみが重要であると想定して、ブラウザーがテーブル レイアウトの計算を最適化できることを意味します。特に、レイアウトのパフォーマンスに大きな違いをもたらす可能性がある、後のテーブル コンテンツのレイアウト計算を検査して実行する必要はありません。

正しい解決策は、最初の行を使用するのではなく、要素<col>と要素を使用して列幅を明示的に指定することです。<colgroup>

于 2012-10-11T13:13:05.697 に答える
-1

テーブルの最初の行にもすべてを含める必要があります。Chrome のバグにより、これを使用することはできません。

于 2012-04-30T11:10:04.730 に答える