0

3列のテーブルと1つのヘッドがあります。このような：

ここに画像の説明を入力してください

これが私のhtmlコードです：

            <table>
                <thead>
                    <tr>
                        <th class="right"><input type = "checkbox"></th>
                        <th class="left">Afficher: Tous blah blah</th>                            
                        <th class="right">Trier par: Numéro</th>
                    </tr>
                </thead>

                <tbody>
                    <tr><td class="right"><input type="checkbox"></td><td class="left">12/00119</td><td class="left">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>
                    <tr><td class="right"><input type="checkbox"></td></td><td class="left">12/00120</td><td class="left">YYYYYY YYYYYY YYYYYYYY YYYYYYY YYYYYYY</td></tr>
                    ...

ご覧のとおり、ヘッダーの2番目の列のテキストは、その下の行の内容よりもはるかに幅が広くなっています。したがって、見出しのテキストは折り返されます。ヘッダーの3番目の列が右揃えであることに注意してください。

私の質問：（2列目の）見出しテキストを同じ行に続けることはできますが、テーブルのメイン行の対応する列を展開しないでください。

これが私が達成したいことです：

ここに画像の説明を入力してください

ありがとう。

4

2 に答える 2

0 
<head>
  <style>
    /*rest styles here*/
    th.left {
      min-width:40px;
      max-width:60px;
    }
  </style>
</head>
<body>
<!-- rest code here -->
  <th class="left">Afficher: Tous blah blah</th>
于 2013-01-26T15:55:37.367 に答える
0

私がテーブルを理解している時点では、あなたがやろうとしていることは不可能です。

これで、colを分割してから、colspanで再結合できますが、ヘッダーをテーブルの外に移動する方がよいのではないでしょうか。

http://jsfiddle.net/5fTDk/

      <table>
            <thead>
                <tr>
                    <th class="right"><input type = "checkbox"></th>
                    <th colspan="2" class="left nobr">Afficher: Tous asdasd asd blah blah <div>Trier par: Numéro</div></th>                            

                </tr>
            </thead>

            <tbody>
                <tr>
                <td class="right"><input type="checkbox"></td>
                <td  class="left date">12/00119</td>
                <td  class="left content">XXXX XXXX XXXX XXXXXXX XXXXXXXX XXXXXX</td></tr>    ...
                </tbody>
                </table>
于 2013-01-26T15:49:07.140 に答える