Question

我有一张桌子，里面有3根柱子和一个头。像这样：

enter image description here

这是我的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列）继续在同一行上但不扩展表格主行的相应列。

以下是我想要实现的目标：

enter image description here

感谢。

Answer 1

根据我对表格的理解，你想要做的事情是不可能的。

现在，您可以拆分cols然后使用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>

Answer 2

<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>

扩大我桌子头部的第一个col

2 个答案: